Question

我一直在使用CSS一段时间，但现在我感到困惑。我有一个响应准备（至少这是我的想法）应用程序。

Galaxy S8（分辨率1440x2960）一切正常（大而可读的文字）;
Nexus 7（分辨率1200x1920）：一切都很糟糕（小而难以阅读的文字）;
Oneplus 3（分辨率1080x1920）：一切都还可以;

基于我的CSS代码，我认为它应该可以正常工作，最大宽度为800px。以上为什么它适用于1080px宽度和1440宽度而不是1200宽度基本上介于两者之间？同样的事情发生在我的引导图标上，它们在1200宽度上非常小，我的联系表格也仅在屏幕的1/3（高度）上（在高度上应该是2/3）。我是在走错路吗？

以下是我的代码示例：

@media screen and (max-width: 800px){body{font-size:17px}}
@media screen and (max-width: 720px){body{font-size:16px}}

Answer 1

您还必须考虑像素比率，这是您必须将设备分辨率除以浏览器用于呈现网站的实际分辨率的因素。

Nexus 7的像素比率为1.325，这意味着1200个实际像素在浏览器中呈现为1200 / 1.325 = 905px宽，因此您指定的媒体查询均未使用。

虽然我找不到三星S8或Oneplus的像素比例，但基于三星s7的像素比为4，1440像素在浏览器中渲染为1440/4 = 360px，所以底部您指明使用的媒体查询。

如果您拥有所提及的设备，请访问以下链接以确定这些设备的像素比率以及渲染分辨率： https://www.mydevice.io/

您可以在此链接中找到像素比率的示例： https://mydevice.io/devices/