@media屏幕用于纵向和横向

Question

我正在使用响应式模板来构建网站，我想为屏幕纵向和横向自定义它的某些部分（例如在iPhone中）。所以我写在css

@media screen and (max-width: 320px) {...}

之后

@media screen and (max-width: 480px) {...}

我使用emulator测试我的网站，但在这两种情况下都会触发第二条规则..为什么？我想念某事吗？

Answer 1

是，

因为例如宽度为240，所以：

240 <= 320然后触发第一个。

和

240 <= 480然后触发第二个。

除了第二个之外，请使用min-width：）

您还可以使用内置的portrait和landscape：

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