“em”单位在样式表中依赖于什么？CSS

Question

根据屏幕大小调整em的大小，

是的，但有些困惑。

• em是否依赖于浏览器设置？哪些设置？
• 还是依赖于屏幕分辨率？
• 或者请问它依赖于什么，以及从哪里可以更改这些元素以观察使用“em”时的大小差异

- user287745

Answer 1

1em等于当前字体大小。2em表示当前字体大小的两倍。例如，如果一个元素以12pt的字体显示，则“2em”为24pt。在CSS中，“em”是一个非常有用的单位，因为它可以自动适应读者使用的字体。

引用自w3schools

- alexyorke

Answer 2

在编写CSS时，需要记住关于“em”作为尺寸单位的棘手问题是，它是累积相对的，并且一旦确定了基础字体大小，会被视为类似于百分比。

因此，请想象一个<p>标签内部有一个<strong>标签，如下所示：

<p>foo <strong>bar</strong></p>

使用以下规则：

p {font-size:0.8em;}
strong {font-size:1.0em;}

与第一印象相反，单词bar不会比单词foo更大；这些单词的大小将是相同的 - strong标签内的字体大小设置为1.0 em，相对于 0.8 em 或 0.8 em。

同样的规则也适用于如下情况：

p {font-size:0.8em;}
strong {font-size:0.8em;}

不会导致foo和bar具有相同的大小；foo将相对于其容器的字体大小为0.8em，而bar将相对于其容器的字体大小为0.8em，或者相对于foo的容器为约0.64em。

- David Alpert

Answer 3

更确切地说，em是当前字体族/字号下"M"字符的高度/宽度（以像素为单位）。除非使用等宽字体，否则"|"和"M"在像素上表示不同的宽度...

- FatherStorm

Answer 4

em 与当前字体大小相关 - 如由父元素上的 CSS 设置。历史上，em 被视为字母 M 的宽度。但是，由于现在并非所有字体都包含 M，因此无法保证！

好处在于，如果用户使用浏览器设置更改字体大小，则它将使非文本元素随字体大小缩放。

- James Gaunt

Answer 5

根据w3schools的引用，em是“当前字体大小”，在任何你看到'em'的地方，都可以被替换成“当前字体大小”这个词。如果font-size为20px，则1em为20px（当前字体大小为20px）。如果将font-size设置为0.7 em，则字体大小会更改为14px（0.7 x 当前字体大小=14px），此时一个em为14px。

如果浏览器默认字体大小为16px且未设置字体大小，则当前字体大小=默认字体大小=16px=1em。如果浏览器默认字体大小设置为30px，则当前字体大小=默认字体大小=30px=1em。

屏幕dpi存在的目的是将以英寸为单位指定的长度转换为像素，因此当字体大小以点为单位指定时，字体大小以像素为单位=[（以点为单位的字体大小）/72] x 屏幕dpi。
在这种程度上，em取决于屏幕分辨率，即通过控制面板设置的屏幕dpi。
http://www.emdpi.com/screendpi.html

对于计算机而言，em从来不是字母“M”的宽度/高度。

- Richard Mason