html - 更改 CSS 字体大小会改变其他 -em 设置吗？

Question

我正在尝试在设计中使用 em 单位而不是 px，以便它可以很好地跨屏幕/设备/等缩放。

我看到的是，当根据 em 单位定义“边距”或“填充”等非字体内容时，当我更改同一元素内的字体大小时，它会更改非字体元素。例如:

header {
  font-size: 1em;  # is default
  margin: 1em;     # will be 16pt
}

对比

div {
  font-size: 2.5em;
  margin: 1em;     # is now 40pt?
}

所以我的问题:

• 对于非字体元素，-em 单位应该以这种方式表现吗？ (我想是的，但只是检查...)？
• 而且，如果不是 -em，那么我应该使用什么灵活的单位来进行元素定位之类的事情？

如果有帮助，我创建了一个 jsfiddle 来测试这些东西:https://jsfiddle.net/0emnypou/

编辑:看起来这可能是以下内容的近乎重复:CSS "em" issue: avoid scalling to font-size of specific element

Answer 1

关于第一个问题:是的，em 单位将(几乎)始终对应于当前元素的字体大小，无论您在哪个属性上使用它。

为了获得一致的“值”，您可以使用 rems ，它代表“root em”，并且该值将始终与 font-size 这是在您的 html 上设置的。

您还可以使用 vw 和 vh，分别代表“viewport width”和“viewport height”

em - Relative to the font-size of the element (2em means 2 times the size of the current font)

rem - Relative to font-size of the root element

vw - Relative to 1% of the width of the viewport

vh - Relative to 1% of the height of the viewport

vmin - Relative to 1% of viewport's smaller dimension

vmax - Relative to 1% of viewport's larger dimension

http://www.w3schools.com/cssref/css_units.asp