我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是,在CSS中定义样式时,为什么要使用em而不是px?有没有一个很好的例子可以说明这一点?
当前回答
因为他们(http://en.wikipedia.org/wiki/Em_(排版))与当前使用的字体大小成正比。如果字体大小是16点,那么一个em就是16点。如果字体大小为16像素(注意:与点不同),则一个em为16像素。
这导致了两件(相关的)事情:
如果你以后选择在CSS中编辑字体大小,保持比例很容易。许多浏览器支持自定义字体大小,覆盖CSS。如果您以像素为单位设计所有内容,那么在这些情况下,您的布局可能会中断。但是,如果你使用ems,这些过度使用应该可以缓解这些问题。
其他回答
我有一台高分辨率的小型笔记本电脑,必须以120%的文本放大率运行Firefox,才能不斜视地阅读。
许多网站都有这样的问题。布局变成乱码,按钮中的文本被切成两半或完全消失。就连stackoverflow.com也深受其苦:
注意顶部按钮和页面选项卡如何重叠。如果他们使用em单位而不是px,就不会有问题。
因为他们(http://en.wikipedia.org/wiki/Em_(排版))与当前使用的字体大小成正比。如果字体大小是16点,那么一个em就是16点。如果字体大小为16像素(注意:与点不同),则一个em为16像素。
这导致了两件(相关的)事情:
如果你以后选择在CSS中编辑字体大小,保持比例很容易。许多浏览器支持自定义字体大小,覆盖CSS。如果您以像素为单位设计所有内容,那么在这些情况下,您的布局可能会中断。但是,如果你使用ems,这些过度使用应该可以缓解这些问题。
像素是绝对单位,而rem/em是相对单位。更多信息:https://drafts.csswg.org/css-values-3/
当您希望字体大小根据系统的字体大小进行调整时,应使用相对单位,因为系统将字体大小值提供给根元素(即HTML元素)。
在这种情况下,如果网页在Google Chrome中打开,HTML元素的字体大小由Chrome设置,请尝试更改它,以查看使用rem/em单位字体的网页的效果。
如果使用px作为字体单位,字体将不会调整大小,而使用rem/em单位的字体将在更改系统字体大小时调整大小。
因此,如果您希望大小固定,请使用px;如果您希望系统大小自适应/动态,请使用rem/em。
避免使用em或px,而是使用rem,因为它更容易找到计算值。但在em和px之间,px更好,因为em很难调试。
如果您想使用px来指定字体大小,但仍然希望em通过将其放在CSS文件中提供可用性,那么有一个简单的解决方案:
body {
font-size: 62.5%;
}
现在指定p(和其他)标记如下:
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}
等等