跨移动设备和桌面的字体大小答案

【问题标题】：Font size across mobile devices and desktops跨移动设备和桌面的字体大小
【发布时间】：2020-08-22 10:42:28
【问题描述】：

我正在尝试让网页在桌面和移动设备上显示合理的字体大小。

我正在我的 Pixel 3 上进行测试，它的像素数与我的桌面一样多。

我已经设置好了：

font-size: 16px;

当我在单元格上加载页面时，字体很小。我的

@media screen and (max-width: 800px)

没有反应。我想那是因为 Pixel 3 显示屏很大。

我试过设置：

<meta name="viewport" content="width=device-width">

然后使用 font-size: 1vh。那似乎也不起作用。对不起菜鸟问题。其他文章通常建议使用@media，但据我所知，较新的单元格的屏幕太大，以至于@media 不适用于像素数学。

底线：一个简单合理的 HTML5/CSS3 页面看起来如何具有跨桌面和移动设备可读的字体大小？

【问题讨论】：

如果您自己没有设置任何字体大小，您会自动为所有设备设置合理的大小。仅在尺寸不太大/小时才有效；）
太棒了！有什么不同:))) 我刚刚杀死了一个我被误导插入字体大小和中提琴的地方，现在它太棒了。高分辨率移动屏幕上的 16 像素几乎无法读取 :-D。如果您发表评论作为答案，我会接受它作为解决方案。
另请注意，移动设备可以有两种“尺寸”。它们可能具有高、真实的分辨率（如高清甚至高达 4k，等等）。当涉及到媒体查询时，他们仍然将自己“定义”为只有 700 像素或其他宽度。这有历史原因，并且一直有效，因此您可以查看手机的媒体查询大小。
结果出乎意料。当我删除不调整大小时，媒体查询突然将其检测为较小的设备并删除了我的 flex 列。这是一个很好的意想不到的好处:-)所以你所描述的事情发生了

【解决方案1】：

@media 如果您操作正确，应该可以正常工作。但是，您可以这样做：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

根据需要更改“initial-scale=1.0, maximum-scale=1.0”的值。我希望这会有所帮助。

或者是这样的：

@media only screen and (max-width: 980px) {
your style
}

@media only screen and (min-width: 981px) {
your style
}

【讨论】：

当 Pixel3 具有 1080x2160 像素时，为什么媒体可以工作？除非@media 做了一些显而易见的事情，否则媒体无法区分我的台式机和移动设备。两者都有> 800px。我已经尝试过初始规模。那没有用。我试试max看看
为了区分移动设备和桌面设备，您需要在 CSS 中使用具有“最大宽度”的媒体和具有“最小宽度”的媒体。我用一个例子编辑了我上面的答案，看看吧。
@John no 来区分您不需要同时使用min- 和max-width。您可以使用其中之一（请参阅移动或桌面优先开发）并覆盖您需要的样式。你可以同时使用这两种方法，但你不需要。