时间戳

首页 > 解决方案 > HTML 字体大小 62.5% - 如何计算行高？

css - HTML 字体大小 62.5% - 如何计算行高？

问题描述

情况是这样的：

html { font-size: 62.5%; }
body { font-size: 16px; }

现在，根据设计 line-height 应该是64px，但我想使用em而不是px. 有没有一个公式可以让 px 变成 em 的？在这种情况下：64px 将是 1.35em）？更好 - 有没有一个scss mixin？

希望我在这里说清楚...... :)

标签： cssscss-mixins

解决方案

line-height: 4;从你所说的......为什么不使用16*4=64像素。如果你想要它，em你可以，因为你知道字体大小与行高的比率。记住 line-height 可以是计算的 font-size （我们在这里使用）或硬编码值的一个因素。

em 值根据父元素而变化，这就是人们将它用于响应式网站设计的原因。

您可以使用 PixelsToEm ( http://pxtoem.com/ ) 通过提供正文字体大小将像素值转换为 em 值。

所以你的 CSS 可能看起来像这样：

body {
    font-size: 1em; /* equivalent to 16px (default font-size for browsers) */
    line-height: 4; /* equivalent to 64px */
}

推荐阅读