HTML 和 CSS em/pixels

HTML and CSS em/pixels

我一直认为 em 是一种比使用 px 更具响应性的设计,但我找不到关于边框和填充等内容的任何转换。

我知道在字体大小中你会用你想要的像素大小除以默认字体大小(在大多数情况下是 16px)但是对于不一定有默认值的边框和填充呢?

干杯

您只是还在使用字体大小。示例:

body {
  font-size: 10px;
}

div {
  border-width: 2em;
}

在这种情况下,divborder-width20px。一个元素的font-size也会影响其他维度然后:

div {
  font-size: 12px;
  border-width: 2em;
}

现在 divborder-width24px,尽管 body 的字体大小不同。

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

@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;
}

Em 相对于其父级继承和缩放。这是一篇详细解释它的文章:https://j.eremy.net/confused-about-rem-and-em/

这是一个非常相似的问题,可能会更清楚地说明 em 计算:How is an em calculated?