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手机，iPhone和Android平板电脑相比）：两款手机看起来都相同，平板电脑更大。到目前为止一切都很好。

但是如果我在代码中添加<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

来自Google的PageSpeed Insights article跨设备字体大小易读性：

某些移动浏览器可能会尝试在没有正确配置视口的情况下缩放网页字体。这种缩放行为因浏览器而异，不应依赖于在移动设备上提供易读的字体。

我认为您在某些设备上注意到的缩放可能是浏览器尝试制作专门用于移动设备上的大屏幕桌面查看的页面的产品。当您添加正确配置的视口元标记时，浏览器认为此网站已经设计为适应不同的屏幕尺寸，并且不需要采取额外的步骤来缩放文本以便易读。

首先，请继续properly configure your viewport，仔细考虑越来越常见的建议，即避免minimum-scale，maximum-scale和user-scalable 因为这些指令可以限制或禁用用户放大和缩小网站内容的能力，许多人依赖这些内容作为辅助功能工具。

如果只是想要更多控制而不是字体大小在屏幕大小和像素密度之间变化，CSS media queries基于视口的宽度和/或高度可能会是你最好的选择。例如：

@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;
    }
}

如果您担心跨设备的文字大小的比例美学（例如，标题文字在智能手机上占据了太多的视口），您可以尝试使用视口单元（具体为{{ 1}}）强制文本与视口的大小成比例缩放。但要注意not all browsers support viewport units consistently。此外，请注意用户的易读性需求，并谨慎使用此方法，因为文本设计为流动和扩展的原因，并强制一块文本适合视口，如广告牌可能会妨碍可读性您的文字适用于不同设备和/或眼球的用户。

Answer 2

尝试设置font-size：2.5vw; ％）

以获得额外的外观https://css-tricks.com/viewport-sized-typography/

PS：仅推荐使用css media for mobile）

响应式设计中的font-size和meta视口

2 个答案: