CSS：应用多个媒体查询答案

【问题标题】：CSS: Applying Multiple Media QueriesCSS：应用多个媒体查询
【发布时间】：2014-04-27 19:47:30
【问题描述】：

我有两个 .css 文件 - 一个用于桌面设备，一个用于（大多数）移动设备。但是，CSS 代码适用于多个 @media 条件 - 我无法让它们在所有设备上工作。

例如，对于 iPhone，@media 查询类似于：

@media only screen and (min-device-width : 360px) and (max-device-width : 480px){
    /* iPhone styling */
}

如果我希望将相同的样式应用到 HTC One，我需要使用：

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px){
    /* HTC One styling */
}

如果我有两个相同的 .css 文件 - 一个带有第一个条件，一个带有第二个条件 - 网站会在两个设备上准确显示我想要的方式。但是，在进行更改时，这意味着我需要编辑多个文件。

我尝试过像这样组合条件：

@media only screen and (min-device-width : 360px) and (max-device-width : 480px),
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) {
    /* Generic mobile device styling */
}

但在 HTC 和 iPhone 上进行测试时，只有 iPhone 以我想要的样式出现。

如何将相同的.css 样式应用于多个@media 条件？

【问题讨论】：

标签： android html css iphone mobile

【解决方案1】：

根据this 文档，您不应该在昏迷后重复@media。以下代码应该可以工作：

@media only screen and (min-device-width : 360px) and (max-device-width : 480px),
only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) {
    /* Generic mobile device styling */
}

【讨论】：