Question

我一直认为em比使用px更具响应性，我在边界和填充等内容的转换中找不到任何内容。

我知道在字体大小上你会想要你想要的像素大小除以默认的字体大小（在大多数情况下为16px）但是如果边框和填充不一定是默认值呢？

干杯

Answer 1

您仍然只使用字体大小。例如：

body {
  font-size: 10px;
}

div {
  border-width: 2em;
}

在这种情况下，div的{{1}} border-width。元素的20px也会影响其他维度：

font-size

现在，div { font-size: 12px; border-width: 2em; }的{{1}} div border-width，尽管有24px其他字体大小。

Answer 2

您可以使用媒体查询进行响应式设计

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
font-size:1em;
border-width: 2em;
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 760px) {
/* STYLES GO HERE */
font-size:1.2em;
border-width: 3em;
}

Answer 3

Em相对于其父级继承和扩展。这篇文章详细解释了它：https://j.eremy.net/confused-about-rem-and-em/

这是一个非常相似的问题，可能会对em计算有更多启示：How is an em calculated?

HTML和CSS em /像素

3 个答案: