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专业版

@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时很好但是当我继续使用最小的（迷你）时，它会覆盖之前的更改，因为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和类似的。具有视网膜显示器的768px x 1024px设备（iPad Mini）实际上具有1536px x 2048px设备像素（如果像素taio为2：1），因此您必须使用真实设备像素大小或使用CSS像素大小。

针对具有相同视口（768px或1024px）的{2个或3个设备

2 个答案: