CSS：应用多个媒体查询

Question

我有两个.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条件？

Answer 1

根据本文档，您不应该在昏迷后重复@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 */
}