Question

我看的CSS看起来像这样：

header .logo {
    text-align: center;
    line-height: 77px;
    font-size: 4em;
    font-weight: bold;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

如果我移动到移动设备，有人可以告诉我这是否有问题吗？我是否应该始终包含一个em大小在行高与em大小的字体？

Answer 1

px单位和em单位非常不同。 px单位表示像素，这是一个相对概念，可能因呈现设备而异（请参阅CSS Values and Units Module Level 3获取详细说明），而em单位则用于font-size属性，表示父元素的字体大小。该大小因上下文，应用的CSS规则等而异，并且最终受用户的控制。所以它可以是任何事情。如果你假设em是像素特定的东西，那么在某些情况下这个假设将不可避免地失败;如果你假设一个特定的大小，为什么不在整个过程中使用px？

因此，您应该使用相同的单位或使用具有固定，明确定义关系的单位设置font-size和line-height。通常，您应该以{{1}}为单位，或以em为单位设置两者，以确保它们组合在一起。但是，如果您在px中设置字体大小，则可以使用line-height的纯数字，例如line-height: 1.2，因为纯数字实际上有em作为隐含单位，除了继承问题。

例如，

em

或

line-height: 77px;
font-size: 64px;

会保持一致。

Answer 2

em单位是：

等于使用它的元素的'font-size'属性的计算值。

这就是specification所说的。

因此，在您的情况下，font-size将比正常继承的{{1>}大四倍（{em> 4em ），而line-height将始终 77px

根据您希望实现的目标，您通常应该放弃自己的方法，因为无论font-size如何更改line-height将始终如一。我建议在其中设置line-height 个人，我很少使用em单位。我尝试始终使用px。我做了很多响应式设计。

Answer 3

In theory, the em unit is the new and upcoming standard for font sizes on the web

我不认为在这里使用 em 会是一个好主意，特别是当您的查看设备范围为normal computer screen to a mobile device

时

Comparing EM, PX, PT and %

此处您的线条高度持续为77px，但是em的大小将根据查看设备而变化。

我可以在px行高内包含我的em大小的字体吗？

3 个答案: