何时使用%、px、em等？

Question

我对CSS还比较新，想知道在定义布局时何时使用不同的单位是否有一些规则或经验法则。目前我把所有东西都定义为百分比，因为我认为这样可以很好地适应窗口大小调整。但事实并非如此，文本开始溢出，图像也会出现问题。

有任何帮助将不胜感激。

- providence

---

我不是专家，所以无法真正为您提供有关何时使用哪个单位的建议，但这是我今天刚刚发现的一篇文章。它有点旧，但解释了一些基础知识：http://green-beast.com/blog/?p=199 - Nathan Ryan

我的建议是使用物理度量单位：1in，1mm，1cm，这样你的文本在不同屏幕大小/分辨率下理论上都是相同大小的。如果不行，那就使用 ex，因为它比 em 更好。 :D - user578895

@Nathan D. Ryan，非常有用的资源，谢谢。 - providence

@cWolves - 这让我感到困扰，因为 ex 是 高度 的度量单位，而 em 是 宽度 的度量单位。 - Stephen P

@Stephen P - 是的，我不是认真的。 - user578895

Answer 1

通常情况下，我使用以下格式：

• 布局 - 像素（除非某些元素需要是百分比宽度/高度）
• 字体 - 像素（有时为了可访问性会使用百分比，但维护起来很麻烦）

一般来说，大多数时候可以使用像素。字体问题更为复杂。例如，如果您想要在浏览器中使用“增大字体大小”功能而不调整页面的其他部分，则需要使用百分比。然而，使用百分比字体大小时，子元素始终继承父元素的字体大小，因此你会得到如下结果：

body { font-size:87%; }
h1 { font-size:87%; }

这意味着h1实际上是87%的87%。这可能非常令人烦恼，因为你最终会得到大于100%的百分比。它会很快变得非常复杂，最好避免使用。我不确定em是否以相同的方式工作，我从未深入研究过它们。

- Hux

Answer 2

使用百分比来实现在不同大小的视口中工作的布局是一种非常高级的技术，通常使用JavaScript动态完成。在您更熟悉CSS并能够查看基于百分比的布局并足以复制它之前，最好坚持使用PX。

如果您选择使用JavaScript，那么这真的很简单。首先使用jQuery，因为与使用本机JavaScript尝试调整布局相比，它使调整布局变得轻而易举。然后$(window).height();给出视口的高度; $(window).width();给出宽度。您为容器设置默认px宽度，然后对所有其他块级元素（容器内的容器、侧边栏、主要内容等）使用百分比，并执行以下操作：

function percentagize() {
var height = $(window).height()-100;
var width = $(window).width()-20;
$("div#container").css({
'height' : height+'px',
'width' : width+'px',
'margin': '0 auto'
});
}

$(document).ready(function() {
percentagize();
$(window).bind('resize','percentagize');
})

- Liam Bailey

---

我非常熟悉JavaScript。也许你知道一些资源，我可以查阅以实现这个目标吗？我正在为时装设计师建立一个网站，因此我非常注重美学。我不担心学习时间。 - providence

Answer 3

在编程中，应该使用ems作为字体单位，这样它们的大小始终是相对的...默认情况下它们是1em或16px...您可以通过设置body { font-size: 75% }来调整此设置，使1em等于12px The PxtoEm calculator is great。从这里开始，您可以做一些事情，比如

h1 { font-size: 3em }
p { font-size: 1em }

现在无论您将正文字体大小设置为多少，h1标签的大小始终是段落的3倍。这样可以提供更大的灵活性，并保持您的类型层次结构成比例。

对于布局，它真的取决于布局类型... 对于经典的固定中心列，则使用像素... 对于流体或自适应布局，则使用百分比（或固定宽度和百分比的混合，即左侧导航栏）。

- Bangline

Answer 4

这应该能给你一个想法：http://w3schools.com/cssref/css_units.asp 那个页面没有很好地解释%，但它意味着相对于包含块的x%。

- RobinJ

Answer 5

尽可能使用em，因为这是最易于维护的。em单位取决于当前元素的字体大小，因此如果更改基础字体大小，则em单位会相应缩放。

在屏幕样式表中需要固定大小时，请使用px。通常，您会以像素为单位指定基础字体的大小。图像大小也应该用px来指定，因为图像不应该因为更改字体而缩放 - 这只会使图像模糊。此外，边框厚度应该使用像素来指定，因为您不希望它依赖于字体大小。

仅在打印媒体样式表中使用pt、pc、in、cm、mm。您可能不希望在同一样式表中混合使用公制和英制，因此请决定使用英寸或厘米/毫米。

% 在编程中有些棘手，因为它的含义取决于属性。对于字体大小而言，100% = 1em，所以你可以根据个人喜好选择使用 % 还是 em。（我更喜欢在字体大小上使用 em，因为 % 在其他情境下有不同的含义。）但是，它不受窗口缩放的影响。字体大小不会随着窗口大小改变，em 或 % 单位也不会。

对于盒子的宽度和高度，% 指的是父级盒子大小的百分比，对于根元素而言，这取决于窗口大小。这听起来并不那么有用！例如，如果你有一段没有指定宽度的文本流，那么行就会变得太长，无法舒适地阅读。如果你使用 em 的方式指定文本框的宽度，就可以在任何屏幕上获得漂亮的可读行长度。但是，如果你使用 % 指定宽度，它将随着窗口大小的变化而缩放，这意味着在某些屏幕上它仍然可能太长，在其他屏幕上则可能太短。尽管按照窗口大小进行缩放在理论上听起来很好，但实际上很少是你想要的。

- JacquesB