哪个度量单位最适合网页布局,px,百分比或ems?

时间:2011-07-03 07:51:20

标签: css layout usability

  

可能重复:
  what is the difference px,em and ex?

我对StackOverflow上的所有编码天才都有疑问。 我是新手,我即将开始建立我的第三个网站。因为我在前两个网站的布局上遇到了一些问题,所以在开始我的第三个网站之前我会问这个问题:

  

最适合使用的测量方法   css元素? Percents,EM's还是Px?

哪种形式的测量将确保我的网站不会因不同的浏览器尺寸/分辨率而失真?在构建我的网站时,还有什么我必须小心的,这样当用户缩放或从不同的浏览器大小/分辨率查看网站时它不会变形吗? (就像我在其他网站上的情况一样)

谢谢你的时间,伙计们。任何帮助将不胜感激!! 谢谢。

5 个答案:

答案 0 :(得分:8)

您可以更轻松地使用。

现代浏览器(即,除了IE6和IE7之外今天使用的所有内容)具有“CSS像素”的概念,其与“实际像素”不同,例如,缩放更改"CSS pixel."字体的大小将缩放得很好;如果你说字体是14px,它会以这种方式开始,但如果用户缩放它会变大。因此,如果您可以轻松地以像素为单位进行测量,例如相对于给定像素大小的图像调整页面元素的大小,则应该使用像素。

有时你想要相对于文本调整大小。如果em-dash的宽度是一个有用的测量值,有些代表“可能的最长字符”,请继续使用ems。

最后,如果你正在尝试流畅的布局,百分比可能很大:在页面上开始淡出50%的渐变通常是你想要的,而不是在一些合适的像素数后开始渐弱的渐变。即使你不流畅,容器的宽度也固定在例如900px,仍然经常有用的说“这是50%的标志”或“我有一件事在33%的标志和一个在66%的标记。”与使用每次相应的像素偏移量相比,这更容易使用,并使您的意图更清晰,只需读取您的代码即可。

答案 1 :(得分:2)

简短回答:这取决于。

更长的答案:

所有三个单元都有一个位置,通常采用相同的设计。没有“最好”的单位;它们用于不同的目的。

像素单元通常提供对用户界面中元素大小的最精确控制,但也限制该大小,使得它不会相对于页面设计的其他元素而改变。像素本身的大小可能会改变。例如,Retina显示器将更多像素包装到与非Retina显示器相同的物理空间中,因此为传统显示器设计的图像被放大。类似地,传统的桌面Web浏览器可以响应于用户缩放页面的大小来调整像素的大小。但是,在这些情况下,像素会在整个文档中更改大小,并且相对于彼此保持相同的比例,因此您可以使用px值并期望它们在大多数情况下都能正常工作。

EM单位根据文本大小而有所不同。它们最常用于设置文本大小和行高;但是有一些有趣的事情已经完成了“弹性”布局,例如elastic lawn zen garden(关闭此网站的页面缩放;切换到纯文本缩放并更改大小几次)。

百分比根据包含元素的大小而变化,根据可用空间的大小而扩大和收缩。

而且,实际上,看到使用所有这些的网页设计是很常见的。例如,假设您有一个包含两列的站点。主列必须扩展和缩小浏览器宽度,但辅助列需要保持相同的宽度。主列的宽度可能为100%,但也可以设置以像素为单位的边距,以便浮动辅助列。文本和行高可以在ems中设置。

所以,真正的答案是:他们都有自己的用途。继续练习,很快你就会发现它们是如何组合在一起的。

编辑:在上面的示例中,我应该说“自动宽度” - 意味着在考虑边距,填充和边框后占用所有可用空间。对不起,我倾向于将其视为一个百分比,即使它实际上是一个关键字。

答案 2 :(得分:0)

从可访问性的角度来看需要使用EM的。您需要布局以适应不同的字体大小,因此如果所有测量都在EM中,随着可访问性工具增加字体大小,所有内容都会缩放

答案 3 :(得分:0)

在创建液体布局时,使用百分比作为块的宽度是有意义的,因此它们会随着浏览器大小的变化而缩小和增长。

对于高度,pts具有特定的空间值,并且em与您当前的点大小相关。这很有用,因为在这些单元中指定的内容在每个人的显示器上大小大致相同(除非它们应用了不同的缩放因子)。在处理由大量文本驱动的维度时,em也很有用。

浏览器还会缩放以像素为单位指定的值,因此它们不再是“陷阱”,但它们很少是布局的“自然”选择,除非使用光栅图像。

Will和Domenic说:在适当的时候使用这三个。随着您获得更多经验,您将更好地了解何时使用哪种。

答案 4 :(得分:-1)

如果您想设计固定布局网站,请使用px或em。 如果您想设计流畅的布局网站,请使用百分比。

百分比始终是相对的,因此具有百分比尺寸的页面内容将自动调整窗口大小调整和不同屏幕分辨率。

px和em是同一个东西。它们的性质相同。它们定义了维度的绝对性。顺便说一句,1em=current font size。因此,如果您的htmlbody有css font-size:19px;,那么1em=19px.