时间戳

首页 > 解决方案 > 任何设备上适当大小的字体

css - 任何设备上适当大小的字体

问题描述

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

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

@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 上会很好地工作监视器也是如此，但我无法测试。

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

标签： cssfont-size

解决方案

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

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

这里解释得很好。 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

推荐阅读