为什么在 CSS 中为 div 的宽度使用百分比值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4982900/
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
Why use percentage value for div's width in CSS?
提问by Moon
I am reading articles about css. I found out that many of writers suggest to use % value for div's width or height.
我正在阅读有关 css 的文章。我发现许多作者建议对 div 的宽度或高度使用 % 值。
I am using pixels all the time.
我一直在使用像素。
Why should I use % value for div's width or height instead of pixels?
为什么我应该对 div 的宽度或高度使用 % 值而不是像素？
What are the advantages?
有哪些优势？
采纳答案by Matt Eskridge
I, personally, dislike websites which have a % width for the main content area because of the inconsistency. It's best to use a pixel width of about 1000 pixels, maybe a bit less, for the whole website so that it will work for all resolutions.
由于不一致，我个人不喜欢主要内容区域具有 % 宽度的网站。最好为整个网站使用大约 1000 像素的像素宽度，也许少一点，以便它适用于所有分辨率。
As for elements inside the main content area, I tend to use percent widths because I don't really want to both with calculating the exact pixel values. The result is set in stone anyway because the thing that it's a percentage of is constant, as opposed to the monitor's resolution, which varies between users.
至于主要内容区域内的元素，我倾向于使用百分比宽度，因为我真的不想同时计算精确的像素值。无论如何，结果是一成不变的，因为它的百分比是恒定的，而不是显示器的分辨率，它因用户而异。
To sum it up: only use percentages when every user is going to get the same result because of a parent element having a fixed (pixel) width. Otherwise there will be inconsistencies in your design, making it so that you can't use any flashy images and the website may look ugly to users with giant / tiny monitors. If you are going to use percentage widths you simply have to test the website with different resolutions!
总结一下：仅当每个用户都将获得相同结果时才使用百分比，因为父元素具有固定（像素）宽度。否则你的设计会出现不一致，导致你不能使用任何华而不实的图像，并且网站对于拥有巨大/微小显示器的用户来说可能看起来很丑陋。如果您打算使用百分比宽度，您只需用不同的分辨率测试网站！
回答by Tobias
Save the following html to a file and open it with your web browser. Now change the size of the web browser window, notice the percent will expand and contract and the pixels don't.
将以下 html 保存到文件中，然后使用 Web 浏览器打开它。现在更改 Web 浏览器窗口的大小，注意百分比会扩展和收缩，而像素不会。
<!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
margin:0;
width:100%;
height:100%;
background:blue;
}
.pixels {
width:100px;
height:20px;
background:green;
}
.percent {
width:50%;
height:50%;
background:red;
}
</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>
回答by user2073035
I find web sites that don't fit the screen, either leaving white space (which can be considerable) round the edge of the content, or falling off the side with a scrollbar (or, worse, falling off the side withOUT a scrollber!) intensely annoying.
我发现网站不适合屏幕，要么在内容的边缘留下空白（可能相当大），要么从滚动条的一侧掉下来（或者更糟糕的是，在没有滚动条的情况下从一侧掉下来！ ) 非常烦人。
I write my pages to fit the screen, regardless of how large that screen is.
无论屏幕有多大，我都会编写适合屏幕的页面。
回答by Shaz
Although certainly not the only reason, use percentage to take up a certain amount of space of something you don't initially know the container parents width of.
虽然肯定不是唯一的原因，但使用百分比来占用您最初不知道容器父宽度的某些内容的一定数量的空间。
For example, let's say I want my div element to always occupy at least 50% of the viewers browser window, I could write that as:
例如，假设我希望我的 div 元素始终占据查看者浏览器窗口的至少 50%，我可以将其写为：
<div style="width:50%">
This will take up 50% of the width
</div>
Doing this the fixed way by using "px" will require you know the resolution of the browser if you want at least 50% width taken up. You could do this using JavaScript, but CSS is much more easier and faster.
如果您希望至少 50% 的宽度被占用，那么使用“px”以固定方式执行此操作将需要您知道浏览器的分辨率。您可以使用 JavaScript 来完成此操作，但 CSS 更容易、更快捷。
Some other Examplesusing tables, divs, and animations: http://jsfiddle.net/BLQp7/1/
使用表格、div 和动画的其他一些示例：http: //jsfiddle.net/BLQp7/1/
回答by Jonathan Wood
It's not clear which context you are referring to (what type of elements). However, you need to be careful when using pixels for font sizes.
不清楚您指的是哪个上下文（什么类型的元素）。但是，在使用像素作为字体大小时需要小心。
I generally use pixels for divs to keep my layout as expected. But I avoid pixels for fonts. Different users may want the font at different sizes. Why take that away.
我通常使用像素作为 div 来保持我的布局如预期。但我避免使用像素作为字体。不同的用户可能需要不同大小的字体。为什么要把它拿走。
回答by JNZ
the benefit of using % is than you can use all 100% of user interface, and give best experience no mattet
使用 % 的好处是您可以使用所有 100% 的用户界面，并提供最佳体验
回答by Cool Hand Luke
Because if it's percentage based content flows making it easier to implement a responsive site (easier = (less (time = money))).
因为如果它是基于百分比的内容流，则可以更轻松地实现响应式网站（更容易 =（更少（时间 = 金钱）））。
Drop the relevant floats, sort out your menus and and anything else after dropping in some media queries and you've got a site working on different resolutions and devices.
删除相关的浮动内容，在删除一些媒体查询后整理您的菜单和其他任何内容，并且您有一个在不同分辨率和设备上工作的网站。
I use a fluid grid system using percentages and a ems for text sizes. Pixels are easier to work with but not in responsive terms. I do wrap my size in max width container.
我使用使用百分比的流体网格系统和文本大小的 em。像素更容易使用，但不是响应式的。我确实将我的尺寸包裹在最大宽度的容器中。
PS
聚苯乙烯
Remember though everything boils down to pixels in the end.
请记住，尽管一切最终都归结为像素。
回答by Abimbola
All in all, if you use images on your site, using percent for main contianer may not be the best approach. In that case, you'd want to use pixels.
总而言之，如果您在网站上使用图像，则主容器使用百分比可能不是最佳方法。在这种情况下，您会想要使用像素。
Advice: Use Pixels for main contianer and percent for content.
建议：主要容器使用像素，内容使用百分比。
