Html 如何考虑使用@媒体的大多数移动屏幕？

我使用Cordova制作了一个应用程序，但遇到了一些困难，css试图让它在大多数手机屏幕上看起来平等

在这一过程中，我了解到我开始为每个测试设备编写

@media

查询（小米红米注3、小米红米3S、华为ATH-UL01、华为KII-L21）

第一个问题是

@media screen and (device-width: 360px) and (min-device-height: 540px) and (-webkit-device-pixel-ratio: 3) {
}

对于小米Redmi Note 3是好的，但是对于华为ATH-UL01是坏的，尽管它们的特性（设备宽度：360px和像素比）是相同的！也许还有别的东西，我没有在

@media

中描述过

第二个问题是，在我看来，为每台设备编写

@media

是不对的。让应用程序在大多数设备上看起来不错的正确方法是什么？什么是良好实践

---

字体大小

和

行高

在不同的屏幕上看起来都不一样。如何避免呢？也许我应该使用

em

？现在我使用的是

px

简短的回答：只需以宽度为目标，一视同仁

有了移动设备，情况会有所不同。您特别提到了

字体大小

和

行高

。由于物理的

dpi

（每英寸点数）或

ppi

（每英寸像素数）不同，它们看起来会有所不同

这让人更加困惑，因为移动设备（尤其是那些具有非常高的

dpi

）在移动设备上模拟了

ppi

。一部iPhone可能有1000像素宽，但在浏览器上显示时就好像它有大约640像素宽一样。这些不一定与设备的物理尺寸相对应

这意味着在一部手机上，16px在现实世界中可能是1/4“，而在另一部手机上可能是1/6”或1/2”

所有这些基本上都意味着你永远不会得到完全相同的东西。你最好的方法是只瞄准设备的宽度，同时观察几个设备，找到“足够好”的东西。然后，对于任何异常值，你可以更具体地瞄准它们来修复一些小问题

如果你想让每个设备看起来一模一样，你会发疯的。这是不可能的