哪种测量单位最适合网页布局，是 px、百分比还是 em？
可能的重复：
px、em 和 ex 有什么区别？
我有这是一个针对 StackOverflow 上所有编码天才的问题。 我是一个新手，我即将开始建立我的第三个网站。由于我的前两个网站的布局存在一些问题，因此在开始第三个网站之前我会问这个问题：
最适合用于什么测量 CSS 元素？百分比、EM 还是 Px？
哪种测量形式可以确保我的网站不会因不同的浏览器尺寸/分辨率而失真？在构建网站时，我还有什么需要注意的地方，这样当用户缩放或从不同的浏览器尺寸/分辨率查看网站时网站就不会变形吗？ （就像他在我的其他网站上的情况一样）
感谢您的宝贵时间，伙计们。任何帮助将不胜感激！ 谢谢。
Possible Duplicate:
what is the difference px,em and ex?
I have a question for all the coding geniuses on StackOverflow.
I am a newbie, and I am about to start building my third website. Being that I had some problems with the layouts of my first two websites, I am asking this question before I start on my third:
What measurement is it best to use for
the css elements? Percents,EM's or Px?
Which form of measurement will ensure that I have a site that will not get distorted on different browser sizes/resolutions? Is there anything else that I have to be careful of when building my site so that it will not get distorted when a user zooms, or looks at the site from a different browser size/ resolution? (as was he case on my other sites)
Thanks for your time, guys. Any help would be greatly appreciated!!
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
哪个对您来说更容易使用。
现代浏览器（即除了 IE6 和 IE7 之外目前使用的所有浏览器）都有“CSS 像素”的概念，它与“实际像素”不同，因此例如缩放更改"CSS 像素" 的大小。字体可以很好地缩放；如果你说字体是 14px，它会以这种方式开始，但如果用户缩放它会变得更大。因此，如果您可以轻松地以像素为单位进行测量，例如相对于给定像素大小的图像来调整页面元素的大小，那么您应该使用像素。
不过，有时您想要相对于文本调整内容的大小。如果 em 破折号的宽度是一个有用的测量值，在某种程度上代表了“最长的可能字符”，请继续使用 em。
最后，如果您正在尝试流畅的布局，百分比可能会很棒：在页面上开始褪色 50% 的渐变通常就是您想要的，而不是在一定数量的像素后开始褪色的渐变。即使你不流畅，并且容器的宽度固定为 900 像素，说“这在 50% 标记处”或“我有一个东西在 33% 标记处，另一个东西在 33% 标记处”仍然很有用。 66% 标记。”这比每次都计算出相应的像素偏移量要容易得多，并且使任何阅读代码的人都更清楚您的意图。
Whichever is easier for you to work with.
Modern browsers (i.e. everything in use today except for IE6 and IE7) have a concept of "CSS pixels" which is different from "actual pixels," so e.g. zooming changes the size of a "CSS pixel." Fonts will scale just fine; if you say the font is 14px, it will start out that way, but if the user zooms it'll get bigger. Thus, if it's easy for you to measure in pixels, for example to size page elements relative to an image of a given pixel size, you should do pixels.
Sometimes you want to size things relative to text, though. If the width of an em-dash is a useful measurement, somewhat representing the "longest possible character," go ahead and use ems.
And finally, if you're trying for a fluid layout, percentages can be great: a gradient that starts fading 50% across the page is often what you want, as opposed to one that starts fading after some fit number of pixels. Even if you're not fluid, and the width of your container is fixed to e.g. 900px, it's still often useful to say "this goes at the 50% mark" or "I have one thing at the 33% mark and one at the 66% mark." That's much easier to work with than figuring out what the corresponding pixel offset is every time, and makes your intent clearer to anyone reading your code.
简短的回答：这取决于。
更长的答案：
所有三个单元都有一个位置，通常采用相同的设计。没有“最好”的单位；它们有不同的用途。
像素单位通常可以对用户界面中元素的大小进行最精确的控制，但也会限制该大小，使其不会随着页面设计的其他元素而改变。像素本身的大小可能会改变。例如，视网膜显示屏将更多像素封装到与非视网膜显示屏相同的物理空间中，因此为传统显示屏设计的图像会被放大。类似地，传统的桌面网络浏览器可以响应于用户缩放页面尺寸来调整像素的尺寸。然而，在这些情况下，整个文档中的像素大小会发生变化，并且彼此之间保持相同的比例，因此您可以使用 px 值并期望它们在大多数情况下都能正常工作。
EM 单位根据文本大小而变化。它们最常用于设置文本大小和行高；但是使用“弹性”布局做了一些有趣的事情，例如 弹性草坪禅宗花园（关闭此网站的页面缩放；切换到纯文本缩放并更改大小几次）。
百分比根据包含元素的大小而变化，根据可用空间的大小进行扩展和收缩。
事实上，使用所有这些的网页设计很常见。例如，假设您有一个包含两栏的网站。主列必须随浏览器宽度扩展和收缩，但次列需要保持相同的宽度。主列的宽度可能为 100%，但也有以像素为单位设置的边距，以便辅助列浮动。并且文本和行高可能以 em 为单位设置。
所以，真正的答案是：它们都有各自的用途。继续练习，很快你就会弄清楚它们是如何组合在一起的。
编辑：在上面的例子中，我应该说“自动宽度”——意思是在考虑边距、填充和边框后占用所有可用空间。抱歉，我倾向于将其视为百分比，即使它实际上是一个关键字。
Short answer: it depends.
Longer answer:
There is a place for all three units, frequently in the same design. There is no "best" unit; they serve different purposes.
Pixel units generally offer the most precise control over the size of the elements in the user interface, but also restrict that size such that it does not change with regard to the other elements of the page design. The size of pixels themselves may change. For example, a Retina display packs more pixels into the same physical space as a non-Retina display, so images which were designed for traditional displays get scaled up. Similarly, traditional desktop web browsers may adjust the size of pixel in response to the user zooming the size of a page. In these cases however, the pixels change sizes throughout the entire document, and retain the same proportions with regard to one another, so you can use px values and expect them to work sanely in most conditions.
EM units vary according to the size of the text. They're most commonly used for setting the size of text, and for line heights; but there have been some interesting things done with "elastic" layouts such as the elastic lawn zen garden (turn off page zoom for this site; switch to text-only zoom and change the size a few times).
Percentages vary according to the size of the containing element, expanding and contracting depending on how much room is available to them.
And, really, it's very common to see web designs that use all of these. For example, suppose you have a site with two columns. The main column must expand and contract with the browser width, but the secondary column needs to stay the same width. The main column might have a width of 100%, but also a margin set in pixels for the secondary column to float in. And the text and line height might be set in ems.
So, the real answer is: they all have their uses. Keep practicing, and pretty soon you'll figure out how it all fits together.
EDIT: In the example above, I should have said "a width of auto" -- meaning take up all available space after margins, padding, and borders are accounted for. Sorry, I tend to think of that as a percentage even though it's actually a keyword.
从可访问性的角度来看需要使用EM的。您需要布局来适应不同的字体大小，因此如果所有测量值都采用 EM 格式，则随着辅助工具增加字体大小，所有内容都会缩放
from accessability point of view need to use EM's. You need you layout to adapt to very different fonts sizes so if allmeasurements are in EM's everything will scale as accessability tools increase font size
创建液体布局时，使用百分比作为块的宽度是有意义的，因此它们会随着浏览器尺寸的变化而缩小和增长。
对于高度，pts 具有特定的空间值，em 与您当前的点大小相关。这很有用，因为以这些单位指定的内容在每个人的显示器上的大小大致相同（除非它们应用了不同的缩放系数）。 em 在处理由大量文本驱动的维度时也很有用。
浏览器还会缩放以像素为单位指定的值，因此它们不再是“陷阱”，但它们很少是布局的“自然”选择，除非使用光栅图像。
正如威尔和多梅尼克所说：在适当的时候使用这三个。随着您获得更多经验，您将更好地了解何时使用哪种方法。
When creating liquid layouts, it makes sense to use percentages for the widths of your blocks, so they shrink and grow with browser size changes.
For heights, pts have a specific spatial value, and em are related to your current point size. This is useful because things specified in those units will be roughly the same size on everyone's display (unless they have different zoom factors applied). em are also useful when working with a dimension driven by an amount of text.
Browsers will also scale values specified in pixels, so they are not any more a "trap", but they are rarely the "natural" choice for layouts, unless working with raster images.
As Will and Domenic say: use all three, when appropriate. As you get more experience, you'll get a better feel for when to use which.
如果您想设计固定布局的网站，请使用 px 或 em。
如果您想设计流畅的布局网站，请使用百分比。
百分比始终是相对的，因此具有百分比尺寸的页面内容将在窗口大小调整和不同的屏幕分辨率上自动调整大小。
px 和 em 是一回事。他们的本质是一样的。它们定义了维度的绝对性。顺便说一句，区别在于，
1em=当前字体大小。因此，如果您的html或body有 cssfont-size:19px;则1em=19px。If you want to design a fixed layout website then use px or em.
If you want to design a fluid layout website then use percentages.
Percentage is always relative so page content with dimensions in percentage will automatically resize on window resize and on different screen resolutions.
px and em are one and the same thing. Same in their nature. They define the absoluteness of the dimensions. Btw for the difference,
1em=current font size. So if yourhtmlorbodyhas cssfont-size:19px;then1em=19px.