Android CSS：应用多媒体查询

我有两个

.css

文件——一个用于桌面，一个用于（大多数）移动设备。但是，CSS代码适用于多个

@媒体

条件-我无法让它们在所有设备上工作

例如，对于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

条件？

根据文档，昏迷后不应重复

@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 */
}