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

Question

我有一个元素，通过使用em单元，它有一个基于font-size的padding。但每次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>

​

我的目标不是必须在元素/组件中编写media-queries，它应该只依赖于其父元素的字体大小。

Answer 1

如果你的字体大小和1em增加了1px，并且字体大小超过16px的每个像素的填充应该增加5px，填充应该是calc(1.875 * 16px + ((1em - 16px) * 5)) - 16px (1.875 * 16px)的原始填充加上16px乘以5的字体大小的差值。