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

【问题标题】：How to create media query that work for both device-width and width如何创建适用于设备宽度和宽度的媒体查询
【发布时间】：2012-06-12 18:32:22
【问题描述】：

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

这项工作在移动设备上

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

这个在桌面上

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

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

【问题讨论】：

【解决方案1】：

根据W3 documentation for Media Queries：

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

使用逗号代替或：

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

【讨论】：