在响应式网站中处理字体大小的最佳方法？答案

【问题标题】：Best approach for handling font sizes in Responsive Websites?在响应式网站中处理字体大小的最佳方法？
【发布时间】：2013-10-09 20:42:48
【问题描述】：

我正在构建一个响应式全宽网站。基本上，正文中的内容将适合视口。

我的问题是，处理字体大小的最佳方法是什么？

显然，我无法为所有分辨率保持相同的字体大小。对于某些屏幕分辨率，字体大小可能需要减小，而对于某些屏幕分辨率，字体可能需要增大。

我知道的当前方法是使用 媒体查询。我可以为不同的屏幕尺寸编写不同的媒体查询，并在媒体查询中设置字体大小。

是否有任何替代方法，这是最推荐的方法吗？

谢谢

【问题讨论】：

标签： css media-queries screen-resolution

【解决方案1】：

我通常声明 body { font-size: 1eM;在宽度

【讨论】：

我不推荐使用 em 的 body 标签。最好将 html 标签设置为 100%，然后将 rem 用于 body 标签和所有其他字体大小声明。

【解决方案2】：

建议使用媒体查询，这样您就可以走上正轨。我可以列出一些用于常见设备的典型媒体查询，但我相信你最好浏览这篇文章：MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS 这篇文章还分叉来解释随着移动到更大尺寸的手机等的到来，一切都发生了怎样的变化。另一个建议是使用元标记设置视口设置，如下所示：

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

【讨论】：