为什么用em而不是px?

CSS

斯丁猪猪

2020-03-16

听说您应该在样式表中使用em而不是像素来定义尺寸和距离。所以问题是,为什么在CSS中定义样式时应该使用em而不是px?有一个很好的例子可以说明这一点吗?

第1740篇《为什么用em而不是px?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
米亚十三Harry 2020.03.16

普遍的共识是使用百分比来调整字体大小,因为跨浏览器/平台更加一致。

但是,这很有趣,我一直使用pt来调整字体大小,并且我假设所有站点都使用了pt。您通常不会在其他应用程序(例如Word)中使用px大小。我想这是因为它们用于打印-但是在Web浏览器中的大小与在Word中的大小相同...

乐Near 2020.03.16

像素是绝对单位,而rem / em是相对单位。有关更多信息:https : //drafts.c​​sswg.org/css-values-3/

当希望字体大小根据系统的字体大小自适应时,应该使用相对单位,因为系统会将字体大小值提供给作为HTML元素的根元素。

在这种情况下,如果网页在Google chrome中打开,则HTML元素字体大小由chrome设置,请尝试对其进行更改,以查看对带有rem / em单位字体的网页的影响。

在此处输入图片说明

如果px用作字体单位,则更改系统的字体大小时,字体不会调整大小,而带有rem/ em单位的字体会调整大小。

因此,px当您要固定大小时使用,rem/ em要使大小自适应于系统大小/动态时,请使用/

古一斯丁 2020.03.16

您可能想使用em作为字体大小,直到IE6消失(来自您的站点)。当页面缩放(与文本缩放相反)成为标准行为时,Px会很好。

Traingamer已经提供了必要的链接

逆天泡芙神无 2020.03.16

如果您想使用px来指定字体大小,但是仍然希望通过将其放在CSS文件中来提供em的可用性,则有一个简单的解决方案:

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 */
}

等等。

Davaid十三樱 2020.03.16

使用px精确放置图形元素。使用em进行测量,必须在诸如行高等文本元素周围进行定位和间距。px像素精确,em可以随使用的字体动态变化

番长十三 2020.03.16

使用em或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小。如果使用px中指定的字体进行设计,如果用户选择“ 文本大小-较大”,则它们不会更改大小(在IE 6和其他版本中)这对于有视觉障碍的用户来说是非常糟糕的。

有关此类设计的几个示例和文章(有很多选择),请参阅最新一期的“ A List Apart:Fluid Grids”,旧文章《如何在CSS中调整文本大小》或Dan Cederholm的Bulletproof Web Design

您的图片仍应以px大小显示,但是通常来说,以px来缩放文本大小不是一种好方法。

尽管我个人很鄙视IE6,但它是我们财富200强公司中唯一批准用于大多数用户的浏览器。

DavaidL 2020.03.16

一个非常实际的原因是,如果使用px指定IE 6,则IE 6不允许您调整字体大小,而如果使用相对单位(如em或百分比),则可以调整字体大小。不允许用户调整字体大小对于可访问性非常不利。尽管它正在下降,但是仍然有很多IE 6用户。

JinJin小胖 2020.03.16

例:

代码:body {font-size:10px;} //保持所有小于正确值的10个大小,更改此值,其余更改为该值的1.4

1 {font-size:1.2em;} // 12px

2 {font-size:1.4em;} // 14px

3 {font-size:1.6em;} // 16px

4 {font-size:1.8em;} // 18px

5 {font-size:2em;} // 20px

身体

1个

2

3

4

5

通过更改体内的值,其余的会自动更改为基本值的一倍...

10×2 = 20 10×1.6 = 16等

您可以将基本值设置为8px…因此8×2 = 16 8×1.6 = 12.8 //可以被浏览器四舍五入

MandyStafan 2020.03.16

它可用于必须根据字体大小缩放的所有内容。

这在通过缩放字体大小实现缩放的浏览器中特别有用。因此,如果您使用所有元素调整大小,em它们会相应缩放。

SamSam 2020.03.16

因为em(http://en.wikipedia.org/wiki/Em_ ( typography))与当前使用的字体大小成正比。如果字体大小是16磅,则em是16磅。如果您的字体大小是16像素(请注意:与磅数不相同),则em是16像素。

这导致两件事(相关):

  1. 如果以后选择在CSS中编辑字体大小,则保持比例很容易。
  2. 许多浏览器都支持自定义字体大小,从而覆盖了CSS。如果以像素为单位设计所有内容,则在这些情况下布局可能会中断。但是,如果您使用ems,则这些覆盖应该可以缓解这些问题。
路易宝儿 2020.03.16

I have a small laptop with a high resolution and have to run Firefox in 120% text zoom to be able to read without squinting.

Many sites have problems with this. The layout becomes all garbled, text in buttons is cut in half or disappears entirely. Even stackoverflow.com suffers from it:

Firefox的屏幕截图,文本缩放为120%

Note how the top buttons and the page tabs overlap. If they would have used em units instead of px, there would not have been a problem.

伽罗 2020.03.16

托马斯鲁特(thomasrutter)在上面投票最高的回答是对他对em的回应但是像素大小是非常非常错误的。因此,即使它很旧,我也不能忘记它。

电脑屏幕通常不是96dpi!(或者ppi,如果您想做书呆子。)


像素没有固定的物理尺寸。
(是的,它仅固定在一个屏幕中,但是在下一屏幕中,一个像素很可能更大或更小,并且肯定不是1/96英寸。)


证明
画一条线,长960像素。用物理尺测量。是10英寸吗?没有..?
将笔记本电脑连接到电视。这条线现在是10英寸吗?还没?
在iPhone上显示该行。还是一样大小?为什么不?

谁发明了96dpi电脑屏幕神话?
(有些宗教以72dpi的神话运作。但是同样错误。)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android