使用 rem 时计算 html 元素字体大小的最佳方法是什么？答案

【问题标题】：What is the best way to calculate the font-size of html element while using the rem?使用 rem 时计算 html 元素字体大小的最佳方法是什么？
【发布时间】：2019-08-21 19:21:18
【问题描述】：

我想在我的网站上使用 rem 来使用响应式字体大小。

我们知道，rem 是相对于根元素的字体大小的。所以我应该在不同的设备上设置不同的 HTML 元素的字体大小。

在我看来，我认为我应该使用类似公式的东西，通过使用 js/jquery 来计算字体大小并将其设置为 HTML 元素。更何况我是前端初学者，我觉得公式应该和窗口的宽度有关，但我不确定。

我用谷歌搜索并几乎没有发现任何关于此的信息。我想知道最好的方法是什么？或者如果 rem 不是最好的方法？谢谢。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

@media only screen and (min-width: 900px)  {
  body {
    font-size:48px
  }
}

@media only screen and (min-width: 600px) and (max-width: 900px)  {
  body {
    font-size:36px
  }
}

@media only screen and (max-width: 600px) and (min-width: 300px)  {
  body {
    font-size:18px
  }
}

&lt;body&gt; Test &lt;/body&gt;

我认为根据屏幕的高度和重量调整尺寸是一种更好的方法。这是一个动态更改正文字体大小的示例。

【讨论】：

嗯，我有一个想法，如果我使用@media 并用 VW 设置字体大小可能会更顺利。
我完全同意你的看法。使用相对单位可以使您的页面看起来更好。

【解决方案2】：

我更喜欢使用响应式元标记：

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

您可以阅读以下内容： meta tag

font-size and meta viewport in a responsive design

【讨论】：

但是不同分辨率设备的字体大小应该不一样吧？