html - 人像 AND 风景 VS.纵向和横向分开

Question

我应该同时使用横向和纵向吗

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

或像这样分开

@media only screen and (min-width : 321px) {} for landscape

@media only screen and (max-width : 320px) {} for portrait

还是一起？这里有什么区别？

Answer 1

顶部查询将仅针对屏幕宽度介于 320px和 480px .

@media only screen and (min-width : 321px) {}将针对任何大于 321px 的内容.

@media only screen and (max-width : 320px) {}将针对任何小于 320px 的东西.

您可以添加类似 @media only screen and (min-width: 320px) and (orientation: landscape) {} 的内容仅当设备为 320px 时才会返回 true或横向更宽的和。

(orientation: portrait)在媒体查询中也是允许的。