Question

我正在尝试在设计中使用em-units而不是px，以便在屏幕/设备/等之间很好地扩展。

我所看到的是，当根据em-units定义非字体内容如“margin”或“padding”时，当我改变同一元素中的font-size时，它会改变非字体元素。例如：

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

VS

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单位（几乎）总是对应当前元素的字体大小，无论你使用它的属性。

对于一致的“值”，您可以使用rem s代表“root em”，该值将始终与font-size上的html相同。 1}}。

您还可以使用vw和vh，代表“视口宽度”和“视口高度”

em - 相对于元素的字体大小（2em表示当前字体大小的2倍）

rem - 相对于根元素的字体大小

vw - 相对于视口宽度的1％

vh - 相对于视口高度的1％

vmin - 相对于视口较小尺寸的1％

vmax - 相对于视口较大尺寸的1％

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

Answer 2

是的，ems取决于字体大小，无论它们与哪个元素一起使用。＆＃39; EM＆＃39; （是）与大写字母M的宽度相关联。

另一方面，

'rem'是＆＃39;根M＆＃39;，意味着大小相对于font-size的第一个声明。 rems对你描述的情况特别有用。

Answer 3

我建议设置一个基本字体大小，比如说然后使用rem单元（总是指回基本字体）。我去了你的jsfiddle进行了这些改变，似乎工作（只是改变了大小）。

`**body {font-size: 14pt;}**
header, article, footer {
  border: 1px solid;
  margin: **1rem**;
}

header {
  font-size: 2.5em;
  background-color: DarkTurquoise;
}

article {
  background-color: LightCyan;
 }

footer {
  font-size: **0.5rem**;
  background-color: DarkTurquoise;
}`

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

3 个答案: