css - 针对具有相同视口(viewport)(768 像素或 1024 像素)的 2 或 3 台设备时的媒体查询问题

Question

我目前正在开展一个元素，该元素需要对多种设备具有用户友好性，但在针对具有相同的两个视口(viewport)之一但仍无法找到解决方案的设备时遇到设备本身的问题

我正在使用媒体查询来实现这一点，当然听起来已经够远了，但是网上没有任何解释可以用这种语法来分离 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) {}

苹果手机 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

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