Question

伙计我有一个非常奇怪的问题，我不确定它是否与CSS或Chrome本身有关。

当我发现如果我在移动预览中并将块定位为绝对块时，我一直在网站上工作，块内的字体在屏幕上显示的很少。

请截图：

绝对启用位置：

绝对禁用位置

我删除了所有样式和脚本来测试它，同样的问题。

目前我的代码如下所示：

<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            position: absolute;
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Lorem Ipsum .... </p>
    <div>TEXT</div>
</body>
</html>

P.S。测试了最新版本的Chrome和Chrome Canary - 同样的问题。

Answer 1

我发现了这个问题，那是因为缺少了视口元素...

如果有人遇到此类问题，只需将下面的字符串添加到HTML的head标记中：

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

感谢您的帮助。

Answer 2

您也可以使用vw而不是px。

font-size: 10vw;

CSS绝对位置导致Google Dev Tools中的字体重新调整大小

2 个答案: