Question

我已经应用了背景颜色：灰色用于平板电脑，蓝色用于我的系统浏览器并使用媒体查询css。它工作正常。现在问题是，当我的系统分辨率达到1024x768时，平板电脑颜色 - 灰色也适用于我的系统浏览器而不是蓝色。请建议我。

以下是我的css：

.Box{background-color:#709bd3;height:200px}

@media screen and (min-device-width:600px) and (max-device-width:1024px) {
.Box{background-color:#ccc}
}

Answer 1

首先，请确保在每个语句的末尾都包含分号。

.Box {
background-color:#709bd3;
height:200px;
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .Box {
    background-color:#ccc;
    }
}

我还将min-device-width更改为768px，这是iPad的最小值。

编辑 - 看起来好像您需要使用用户代理字符串。试试这个：

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106/How-Can-I-Detect-the-iPhone--iPads-User-Agent.htm

媒体查询不支持1024x768系统分辨率

1 个答案: