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

根据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 */
}

CSS：应用多个媒体查询

1 个答案: