CSS媒体查询 - min-device-width和max-device-width

Question

我在为特定设备添加CSS时遇到问题。

我在这两个模拟器上运行了我的应用程序：

1. 宽度：320，高度：500
2. 宽度：320和高度：588

现在，我的问题是，CSS总是使用的是第二个：320 x 588.我认为这是因为它符合min-device-width 320的资格。那么我如何才能将第一个CSS 320x500与宽度为320且高度为500？

的设备一起使用

我对min-device-width和max-device-width并不熟悉。

/ * IOS ----------- * /

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 500px) {
   //style here
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 588px) {
   //style here
}

Answer 1

您应该将其重写为

 @media only screen  and (max-device-width : 320px)

表示媒体查询以低于320px

的分辨率触发

你的另一个断点应该是：

@media only screen  and (max-device-width : 588px)

如果我的意图是正确的。但是在这里搜索了一小段时间之后，不用说之前已经提出了问题，所以在我开始复制粘贴答案之前，请快速浏览一下这个主题

What is the difference between "screen" and "only screen" in media queries?

我希望它可以帮助你改善它。 与br paulq