任何设备上适当大小的字体答案

【问题标题】：Appropriately sized fonts on any device任何设备上适当大小的字体
【发布时间】：2021-09-04 05:13:28
【问题描述】：

我目前正在尝试让一个网站在桌面和移动浏览器上显示一些具有适当字体大小的纯文本。尝试为这两种字体选择字体大小会导致文本在桌面上太大而在移动设备上太小，因为显示器不同。

我尝试使用媒体查询根据屏幕宽度更改字体大小。

@media screen and (max-width: 900px) {
  body {
    font-size: 2em;
  }
}

这“有效”，但需要注意的是，如果宽度达到或低于 900 像素，则在桌面上调整浏览器窗口的大小将导致字体大小发生变化。我从不希望字体大小动态响应浏览器大小。无论发生任何窗口大小调整，它都应始终保持相同大小。由于这个要求，我不会将vh 和vw 视为解决方案。

在寻找解决方案时，我发现在媒体查询中使用 dpi 作为替代方案。由于我认为绝大多数移动设备的 dpi 比大多数桌面显示器都高，这可能是在移动设备上更改字体大小的好方法。

@media screen and (min-resolution: 150dpi) {
  body {
    font-size: 2em;
  }
}

但是如果有一个显示器确实超过了这个 dpi 怎么办？这适用于我正在测试的 3 台设备，但我不能确定它是否适用于更多情况。

总的来说，我的目标是获得类似于 Wikipedia 的设置。 https://en.wikipedia.org/wiki/Dots_per_inch 调整浏览器大小时字体大小不会改变，它在移动和桌面浏览器上始终以可读的大小显示，我认为它在高 dpi 显示器上也能很好地工作，但我没有办法测试一下。

那么获得我正在寻找的功能的适当方法是什么？

【问题讨论】：

【解决方案1】：

在写完这个问题之后，但在发布之前，我一直在寻找解决方案，我找到了。它实际上非常简单，但很容易错过。我希望张贴这对将来的其他人有所帮助。这一切都归结为 html 头部中的这一行。

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

【讨论】：

【解决方案2】：

您可以通过使用样式表计算器和以下属性来调整屏幕大小的平均字体大小：

vh - 视口高度

vw - 视口宽度。

您的字体大小将在您的视图上采用相同的大小，但如果您不处理小尺寸布局，则可能无法阅读。

常规尺寸：font-size: calc(.5vh + .8vw);

大尺寸：font-size: calc(5vh + 5vw);

【讨论】：