针对具有相同视口(768px或1024px)的2或3个设备时，媒体查询的问题

Question

我目前正在从事一个项目，该项目需要对多个设备进行用户友好，但是当用两个视口之一定位设备时，遇到了设备上的问题并且仍然无法找到解决方案。

我正在使用媒体查询来构造此问题，当然听起来足够远，但是在线没有解释可以用此语法分开iPad mini

@media only screen and (min-device-width : 768px)
       and (max-device-width : 1024px) and (orientation : landscape) {}

和这个

@media only screen and (min-device-width : 768px)
       and (max-device-width : 1024px) and (orientation : portrait) {}

和iPad pro

@media only screen and (min-device-width : 1024px)
       and (max-device-width : 1366px) and (orientation : landscape) {}

和这个

@media only screen and (min-device-width : 1024px)
       and (max-device-width : 1366px) and (orientation : portrait) {}

我正在使用Chrome DevTool进行设备测试，当我从最大的iPad开始时很好，但是当我继续使用最小的（mini）时，它会覆盖先前的更改，因为CSS从上到下读取我很困惑，请你能帮我更好地理解这个概念吗？

同样，对于手机，我为每个手机有多行代码一（iPhone 5、6、6 但仍然相同的问题）

iPhone 5

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6

@media only screen and (min-device-width : 320px) and (max-device-width : 767px)
       and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}
@media only screen and (min-device-width : 320px) and (max-device-width : 767px)
       and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}

从字面上看，我不知道该如何比这更具体，而在这里iPhone 5，因为CSS中的最后一个是在iPhone 6或6 中覆盖一些阶梯。

Answer 1

如何为每个设备编写不同的样式表

Answer 2

我只使用min-width而不是min-device-width，并且类似。带有视网膜显示器（iPad mini）的768px x 1024px设备实际上具有1536px x 2048px设备像素（如果像素taio为2：1），因此您要么必须使用真正的设备像素大小或使用CSS Pixel size。