如何使用@media考虑大多数手机屏幕？

Question

我提出用科尔多瓦的应用程序，并用CSS试图使它看起来在大多数手机屏幕等会见了一些困难。

某处沿线我了解到我开始为每个测试设备（XIAOMI Redmi Note 3，XIAOMI Redmi 3S，华为ATH-UL01，华为KII-L21）编写@media查询。

第一个问题是

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

是良好的小蜜红米手机注3，但不适合华为ATH-UL01虽然他们的特点（设备宽度：360像素，和像素比）是相等的！也许还有别的，我没有在@media中描述过？

第二个问题是，在我看来，为每个设备编写@media是不正确的。在大多数设备上使应用看起来不错的正确方法是什么？什么是好的做法？

font-size和line-height大多在不同的屏幕上看起来不同。如何避免它？也许我应该使用em？现在我正在使用px。

Answer 1

简短的回答：只是针对宽度和治疗都一样。

使用移动设备时，情况会有所不同。您特别提到了font-size和line-height。那些看起来不同，因为物理dpi（每英寸点数）或ppi（每英寸象素）而变化。

这让人更加困惑，因为移动设备（尤其是那些拥有很高dpi）的移动设备在涉及移动设备时已经模拟了ppi。一个iPhone可能有1000像素，但呈现给浏览器，就好像它有大约640像素。这些不一定对应于设备的物理尺寸。

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

所有这基本上意味着你永远不会你最好的办法是瞄准设备的宽度，同时查看一些设备，找到“足够好”的东西，然后，对于任何异常值，你可以更具体地针对它们解决小东西。

你会自己开车疯了，如果你尽量让每一个设备看起来是相同的。这是完全可能的。