Html 移动设备和台式机的字体大小

我试图让一个网页在桌面和移动设备上显示一个合理的字体大小

我正在测试我的像素3，它的像素数和我的桌面一样多

我设定了：

font-size: 16px; 

当我在手机上加载页面时，字体很小。我的

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

没有反应。我想那是因为像素3的显示器很大

我试着设置：

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

然后使用字体大小：1vh。这似乎也不起作用。对不起，我的问题是noob。其他文章一般都建议使用@media，但据我所知，新电池的屏幕太大，以至于@media无法很好地处理像素数学

---

一句话：一个简单合理的HTML5/CSS3页面在桌面和手机上有一个可读的字体大小是什么样子的？

@如果你做得正确，媒体应该可以工作。但是，您可以做的是：

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

---

如果您不自己设置任何字体大小，则会自动为所有设备设置合理的大小。只有尺寸不太大/小时才有效；）太神了有什么不同：））我刚刚杀了一个地方，我被误导插入了一个字体大小和中提琴，现在它太棒了。高分辨率移动屏幕上的16px几乎无法读取：-D.如果您将评论作为答案发布，我将接受它作为解决方案。还请注意，移动设备可以有两种“大小”。他们可能有一个高，真实的分辨率（像高清，甚至高达4k，无论什么）。在mediaqueries中，他们仍然“定义”自己只有700px或更宽的空间。这是有历史原因的，并且一直有效到现在，所以你可以查询手机的媒体查询大小。结果出乎意料。当我删除“不调整大小”时，媒体查询突然检测到它是一个较小的设备，并删除了我的flex colums。这是一个很好的意想不到的好处：-）那么你在描述什么样的情况呢？当Pixel3有1080x2160像素时，媒体为什么工作？除非@media做了一些不明显的事情，否则media无法区分我的桌面和手机。两者都有>800px。我试过初始比例。那没用。我将尝试max和See来区分移动和桌面，您需要在CSS中使用具有“最大宽度”的at媒体和另一个具有“最小宽度”的at媒体。我用一个例子编辑了上面的答案，请检查。@John no要区分您不需要同时使用

min-

和

max width

。您可以使用其中一种（请参见移动或桌面优先开发），只需覆盖所需的样式即可。两种方法都可以使用，但不需要。

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

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