HTML 和 CSS em/pixels [关闭]答案

【问题标题】：HTML and CSS em/pixels [closed]HTML 和 CSS em/pixels [关闭]
【发布时间】：2015-12-29 19:41:49
【问题描述】：

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

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

干杯

【问题讨论】：

【解决方案1】：

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

body {
  font-size: 10px;
}

div {
  border-width: 2em;
}

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

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

现在div 有一个border-width 和24px，尽管body 的字体大小不同。

【讨论】：

别忘了rem！在您给出的第二个示例中，您可以使用rem 引用body 字体大小。
真的很有用，谢谢:-)

【解决方案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;
}

【讨论】：

【解决方案3】：

Em 继承并相对于其父级进行缩放。这里有一篇文章详细解释：https://j.eremy.net/confused-about-rem-and-em/

这是一个非常相似的问题，可能会更深入地了解 em 计算：How is an em calculated?

【讨论】：