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

Question

我尝试在调整页面大小和移动电话时在两个桌面上都能使用此媒体查询。

这项工作在移动设备上

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

并在桌面上

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

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

Answer 1

根据W3 documentation for Media Queries：

  

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

使用逗号代替或：

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