Html 使我的网站缩放到 css 中的分辨率大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21819713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making my site scale to resolution sizes in css
提问by user3317455
This is my first week of programming in CSS, HTML and PHP. I realized when beginning my site that when I scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.
这是我用 CSS、HTML 和 PHP 编程的第一周。我在开始我的网站时意识到，当我按窗口大小缩放我的网站时，所有文本都会开始重叠，导致问题并且看起来很糟糕。
I was wondering if I could get a clear answer on what I am doing horribly wrong. I have tried methods such as media queries but I still don't understand it at all.
我想知道我是否能得到一个关于我做错了什么的明确答案。我尝试过诸如媒体查询之类的方法，但我仍然完全不明白。
Here is my code:
这是我的代码：
/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>回答by Lie Ryan
You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.
您错误地混合了相对和绝对测量值。如果您是初学者，我建议您先坚持使用一种测量模型，然后逐渐学习如何使用其他模型。
For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.
比如 Stack Overflow 是绝对定位的；如果您调整浏览器窗口的大小，则不会调整任何大小。相对定位的网页可以使内容适应可用的窗口大小。JSFiddle站点相对定位；它总是利用整个窗口大小。
Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.
这两种测量模型都可以制作出一个好的网站，但是要制作一个成功的网站，您必须非常熟悉这两种定位方法以及如何在同一页面中使用它们来产生各种效果。
Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.
许多人认为绝对定位对于初学者来说更容易形象化；尽管如果您想创建更高级的布局以在广泛不同的屏幕尺寸上运行良好，它有其局限性。
If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:
如果要从绝对定位开始，首先要为整个页面确定一定的宽度。许多人使用数量相当少的像素，而这些像素具有大量的偶数可分性，例如 960px 或 800px。要制作一个简单的绝对定位站点，您需要：
- Set
position: absoluteon most things. - Set any two of: top, bottom, or height.
- Set any two of: left, right, or width.
- Everything on the page should use the same measurement unit (e.g. px)
- 设置
position: absolute在大多数事情上。 - 设置以下任意两个：顶部、底部或高度。
- 设置以下任意两个：左、右或宽度。
- 页面上的所有内容都应使用相同的度量单位（例如 px）
For example (edit on jsfiddleor full screen):
例如（在 jsfiddle或全屏上编辑）：
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.
如果您尝试缩放网站或如果您的用户使用不同的窗口大小（他们要么浪费大量空间，要么不得不水平滚动。使用纯绝对定位，网站基本上变得像静态图像。
A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:
更现代的最佳实践是使用浮动定位来生成响应式或弹性网站。为此，您需要了解如何浮动元素和各种布局算法。要制作弹性网站，您需要：
- use percent unit for most things
- utilize the margins and paddings judiciously
- utilize the various layout algoritms
- 大多数事情使用百分比单位
- 明智地利用边距和填充
- 利用各种布局算法
For example (edit in jsfiddleor fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.
例如（在 jsfiddle或fullscreen 中编辑）。诚然，理解各种布局算法可能非常困难，但如果您继续将其用于各种不同的布局，您最终会自然而然地了解它。
回答by Joseph Christopher Pimentel
Try my css .. use a container to hold everything when re size container will do the trick.. try to copy my codes it has a container css .. and it controls overlap see . The containe most be relative to it wont overlap;; hope it help see how #advertisement css id do the trick
试试我的 css .. 使用一个容器来保存所有内容，当重新调整大小容器可以解决问题时.. 尝试复制我的代码，它有一个容器 css .. 并且它控制重叠看到。最相关的容器不会重叠；；希望它有助于了解#advertisement css id 如何做到这一点
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
回答by d1rtyw0rm
Try something like this in your CSS.
在你的 CSS 中尝试这样的事情。
#wholepage { position:absolute; margin:0px; width:100%; }
回答by user3302090
if you want responsive then try like this
如果你想要响应，那么试试这样
CSS
CSS
.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}
HTML
HTML
<div class="header">
<a href="/" id="headertext"> replay.sc </a>
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>
Set content's margin,padding as you like
设置内容的边距，随心所欲地填充
回答by user2903934
True responsiveness can only truly be achieved if you want the behavior of your content to be predictable. Thus you could apply media queries to your website for specific sizes of the screen. @media screenand {max-width:400px}{.....}this simply means at a maximum width of 400px, treat the content like this. So your contents behavior will be included in the {....}. That will leverage you the time to try multiple browsers apart from Internet Explorer and there's one solution for this:
只有当您希望内容的行为可预测时，才能真正实现真正的响应能力。因此，您可以针对特定尺寸的屏幕将媒体查询应用到您的网站。@media screen并且{max-width:400px}{.....}这只是意味着在400像素的最大宽度，治疗这样的内容。因此，您的内容行为将包含在{....}. 这将利用您的时间来尝试除 Internet Explorer 之外的多个浏览器，并且有一个解决方案：
IE8 - I think doesn't support media queries so you'll just have to add a JavaScript file called respond.jsfrom their developer website.
IE8 - 我认为不支持媒体查询，所以你只需要添加一个respond.js从他们的开发者网站调用的 JavaScript 文件。
Reference:
参考：
回答by Luis Aguiar
You can use vwand vhunits:
您可以使用vw和vh单位：
font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax /* = 1vw or 1vh, whichever is larger */
Reference:
参考：
