CSS 增加字体大小的填充不是线性的

Question

我有一个元素具有基于 font-size 的 padding，使用 em 单元。但是每次 font-size 增加 1px 时，我都需要增加 5px 的填充。我什至不确定是否可以使用 calc() 函数或其他方式？

.test {
  font-size: 16px;
  padding: 1.875em;
  border: 1px solid red;
}

@media (min-width: 300px) {
  .test {
    font-size: 17px;
  }
}

@media (min-width: 600px) {
  .test {
    font-size: 18px;
  }
}

<div class="test">
  <span>Lorem Ipsum</span>
</div>

我的目标是不必在element/component里面写media-queries，它应该只取决于其父级的字体大小。

Answer 1

如果您的字体大小和 1em 增加 1px，并且字体大小超过 16px 的每个像素的填充应增加 5px，填充应为 calc(1.875 * 16px + ((1em - 16px) * 5)) - 原始填充为 16px (1.875 * 16px) 加上 font-size 的差为 16px 乘以 5.

CSS 增加字体大小的填充不是线性的

CSS increase padding from font-size not linear

css

font-size

responsive-design