html - 纵向和横向的@media 屏幕

Question

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

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

在此之后

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

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

Answer 1

是的，

因为如果例如宽度是 240，那么：

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

和

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

请min-width在第二个之外使用:)

您还可以使用内置的portraitand landscape：

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