android - 如何创建适用于设备宽度和宽度的媒体查询

Question

当我调整页面大小时，我尝试让这个媒体查询在桌面和手机上都有效。

这在移动设备上工作

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

这是在桌面上

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

但我无法让它们工作 我尝试使用 或 运算符但没有工作。

Answer 1

根据W3 documentation for Media Queries :

Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.

使用逗号代替或:

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