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

Question

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

这项工作在手机上

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

这在桌面上

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

但我不能让它们都工作我尝试使用or运算符但没有工作。

Answer 1

根据媒体查询的 W3 文档：

多个媒体查询可以组合在一个媒体查询列表中。以逗号分隔的媒体查询列表。如果逗号分隔列表中的一个或多个媒体查询为真，则整个列表为真，否则为假。在媒体查询语法中，逗号表示逻辑 OR，而“and”关键字表示逻辑 AND。

使用逗号代替or：

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