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

时间:2010-11-09 22:42:05

标签: css stylesheet

根据屏幕尺寸调整大小,

是的但很困惑

  • 是否依赖于浏览器设置?哪些设置?
  • 还是取决于屏幕分辨率?
  • 或帮助它取决于何处可以改变这些元素以观察使用“em”时尺寸的差异

5 个答案:

答案 0 :(得分:3)

  

1em等于当前的字体大小。 2em意味着当前字体大小的2倍。例如,如果元素显示为12 pt的字体,则'2em'为24 pt。 'em'是CSS中非常有用的单元,因为它可以自动适应阅读器使用的字体

来自w3schools

答案 1 :(得分:3)

在编写CSS时,记住关于em作为单位大小的棘手问题是它是累积相对的,并且一旦建立了基本字体大小,就大致像百分比一样对待。

因此图片a< strong>在< p>内像这样:

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

遵守以下规则:

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

与第一印象相反, bar 这个词大于 foo ;单词将是相同大小 - 强标签内的字体大小设置为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。

答案 2 :(得分:2)

或更确切地说,em是当前font-family / font-size中“M”字符的高度/宽度(以像素为单位)。除非它是等宽字体,否则为“|”并且“M”代表不同宽度的像素......

答案 3 :(得分:1)

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

关于它的好处是,如果用户使用浏览器设置更改字体大小,它将使非文本元素按字体大小缩放。

答案 4 :(得分:1)

正如w3schools所引用的那样,em是“当前字体大小”,在你看到'em'的任何地方,它都可以用“当前字体大小”替换为含义。

font-size是20px然后1 em是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'的宽度/高度。