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

我必须在需要响应的项目上工作。这是我第一次这样做，我被困在一个（可能是愚蠢的）问题。在所有设备上响应式设计中的字体大小和元视口

<!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（即18像素在这种特殊情况下）：

比方说，我有一个非常简单的页面。而且，还可以，在更大型的设备上（我正在比较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>

现在的文字看起来在所有设备上，相同的大小，它不应该，我的理解。

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

谢谢！

来源

2015-04-14 OuberThat

从谷歌上跨设备字体大小易读性的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; 
    } 
}

如果你担心跨设备的文本大小的比例美学（例如标题文本是否占据了智能手机上太多的视口），您可以尝试使用视口单元（具体为vmin）来强制文本与视口的大小成比例地缩放。被警告，但是，那not all browsers support viewport units consistently。另外，请注意用户的易读性需求，并谨慎使用此方法，因为文本旨在流畅和流畅地出于某种原因进行缩放，并强制一块文本像广告牌一样适合视口，这可能会妨碍可读性您的文字供不同设备和/或眼球的用户使用。

来源

2015-04-14 15:56:19 Aaron

谢谢，我想这回答它关于我的字体大小问题。我在这个项目中使用媒体查询，它很快出现无法避免。我要跳过视口单元，正如我在对先前答案的评论中所说的，太多人无法看到它们。 – OuberThat

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

额外的样子https://css-tricks.com/viewport-sized-typography/

PS：建议您只与移动CSS媒体）

来源

2015-04-14 15:04:30

感谢您的回答。我一直在考虑使用视口单元，但根据http://caniuse.com/#feat=viewport-units，这些在4.4以下的Android浏览器中可悲地不被支持。而这仍然是很多人。 – OuberThat

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

回答

相关问题