Question

多年来，我认为我对css中不同类型的值之间的差异有足够的了解，我可以使样式表具有一定程度的自信。好吧，至少到今天为止。

在我的网站上为标题选择正确的字体大小时，我发现在增加em值时字体大小增长率有些奇怪。

在模拟较小的屏幕时，在某些情况下，将em从1.0更改为1.4对于增加实际字体大小几乎没有什么作用，但是从1.4变为1.5会使其大2倍。那是为什么？

我正在使用这个html：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="z2.css" />
        <meta charset="utf-8">
    </head>
    <body>
                <h1>Some text</h1>
                <p>Some longer text, with many lines, very long. Like, thesis long.
REEEALLLYY LONG TEXT. Long. Not hyperbolizing. Just loooooong teeeext. A big blob of long text. I just realized I could have just pasted Lorem Ipsum sonet here. Whatever...</p>
    </body>
</html>

和这个css：

h1 {
    font-size: 2.7em;
}

p {
    font-size: 1.0em;
    float:right;
}

这是模拟宽度为395像素的屏幕时的输出：

现在，将<p>＆＃39; font-size从 1.0更改为1.1 可以做到：

然后，将其更改为 2.2 会这样做（几乎没有）：

我对此非常困惑。我意识到这可能只是因为字体缩放。但是当我：

更改<p>内的文字长度（再添加一个字母）
将<p>＆＃39;浮动设置为无

1.0 em上字体的实际大小上升了。为什么呢？

顺便说一下。我正在使用Chrome DevTools。

Answer 1

您需要在文档中添加viewport元head。

添加如下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

现在，您发现移动显示尺寸可以正确显示font-size，并且可以再次改变尺寸。

这可能有助于您更好地了解当前情况中发生的情况： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

与em值不一致的增长率

1 个答案: