响应式设计中的字体大小和元视口
Posted
技术标签:
【中文标题】响应式设计中的字体大小和元视口【英文标题】：font-size and meta viewport in a responsive design 【发布时间】：2015-06-20 06:10:36 【问题描述】：我必须处理一个需要响应的项目。这是我第一次这样做，我被一个（可能是愚蠢的）问题困住了。
假设我有一个非常简单的页面：
<!DOCTYPE html>
<html>
<head>
<style>
htmlfont-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;
bodyfont-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>
htmlfont-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;
bodyfont-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>
现在文本在所有设备上看起来都一样大，据我了解，这是不应该的。
所以，第一个问题是：我是否在尝试做正确的事情？ 如果我是：我怎样才能得到我正在寻找的行为？
谢谢！
【问题讨论】：
【参考方案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;
如果您担心跨设备文本大小的比例美学（例如，标题文本是否在智能手机上占用过多的视口），您可以尝试使用视口单位（特别是 @987654329 @) 强制文本与视口的大小成比例地缩放。不过请注意，not all browsers support viewport units consistently。此外，请注意用户的易读性需求，并谨慎使用这种方法，因为文本被设计为流畅地流动和缩放是有原因的，并且强制文本块像广告牌一样适合视口可能会妨碍可读性您为不同设备和/或眼球的用户提供的文本。
【讨论】：
谢谢，我想这回答了我的字体大小问题。我在这个项目中使用了媒体查询，它很快就显得不可避免。正如我在上一个答案的评论中所说，我将跳过视口单位，太多人将无法看到它们。【参考方案2】：尝试设置字体大小：2.5vw； %)
更多关注https://css-tricks.com/viewport-sized-typography/
PS：仅推荐使用 css media for mobile )
【讨论】：
感谢您的回答。我一直在考虑使用视口单位，但根据caniuse.com/#feat=viewport-units，遗憾的是，4.4 以下的 Android 浏览器不支持这些单位。这仍然是很多人。以上是关于响应式设计中的字体大小和元视口的主要内容，如果未能解决你的问题，请参考以下文章