响应式设计中的字体大小和元视口

Question

我必须从事一个需要响应的项目。这是我第一次这样做，我被一个（可能是愚蠢的）问题困住了。

假设我有这个非常简单的页面：

<!DOCTYPE html>
<html>
<head>
    <style>
        html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
        body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
    </style>
</head>
<body >
    <div style="font-size:1em;">
        SOME TEXT TO CHECK IF EVERYTHING'S OK
    </div>
</body>
</html>

正如预期的那样，文本字体大小在所有设备上都是 1em（即在这种特殊情况下为 18px）。而且，仍然可以，它在更大的设备上看起来更大（我正在与 Android phone、iPhone 和 Android 平板电脑进行比较）：看起来一样在两个 phone 上，在平板电脑上更大。到目前为止一切顺利。

但是如果我在代码中添加 <meta name="viewport"> 行，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
        body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
    </style>
</head>
<body >
    <div style="font-size:1em;">
        SOME TEXT TO CHECK IF EVERYTHING'S OK
    </div>
</body>
</html>

现在，根据我的理解，文本在所有设备上看起来都一样大，这不应该。

所以，第一个问题是：我是否正在尝试做正确的事情？如果我是：我怎样才能得到我正在寻找的行为？

谢谢！

Answer 1

尝试设置字体大小：2.5vw； %)

额外查看 https://css-tricks.com/viewport-sized-typography/

PS：仅推荐 css 移动媒体）

Answer 2

来自 Google 的 PageSpeed Insights article 在 cross-device font-size 易读性：

Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices.

我认为您在某些设备上注意到的缩放可能是浏览器试图使页面专为 large-screen 设计的产物，桌面查看更易于在移动设备上访问。当您添加正确配置的视口元标记时，浏览器认为该网站已经设计用于适应不同的屏幕尺寸，并且不需要采取额外的步骤来缩放文本以提高易读性。

首先，请继续properly configure your viewport，仔细考虑越来越普遍的建议，即您应该避免minimum-scale、maximum-scale和[=13] =] 因为这些指令可以限制或禁用用户放大和缩小您网站内容的能力，许多人将其作为辅助工具。

如果您只是想更多地控制字体大小在屏幕尺寸和像素密度之间的变化，CSS media queries基于宽度and/or视口可能是您最好的选择。例如：

@media all {
    /* sets the base font size for all user agents that support media queries */
    html {
        font-size: 18px;
    }
}
@media screen and (min-width: 480px) {
    /* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
    html {
        font-size: 24px;
    }
}

如果您担心跨设备文本大小的比例美学（例如，header 文本是否在智能手机上占据了过多的视口），您可能会尝试使用视口单位（特别是 vmin）强制文本与视口大小成比例缩放。不过请注意，not all browsers support viewport units consistently。此外，请注意用户的易读性需求，并谨慎使用此方法，因为文本设计为流动和缩放是有原因的，并且强制文本块像广告牌一样适合视口会妨碍可读性您的文字适合不同设备的用户 and/or 眼球。

响应式设计中的字体大小和元视口

font-size and meta viewport in a responsive design

html

css

responsive-design

viewport

meta