Question

我写了一个示例代码来尝试css中的媒体查询...
这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media only screen and (min-device-width: 374px) and (max-device-width: 376px) {
    body {
        background-color: blue;
    }
    #img {
        background-color: blue; 
    }
button {
        margin: auto;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
<button>Click me!</button>
<image src='Promo_2-2.jpg' id='img' alt='image'></image>
</body>
</html>

但媒体查询不起作用。我哪里错了？

Answer 1

如果您在计算机上查看查询，那么您的查询没有任何问题。请记住：min-device-width计算设备的宽度，而min-width计算窗口大小。您的媒体查询应如下所示：

@media only screen and (min-width: 374px) and (max-width: 376px) {
    body {
        background-color: blue;
    }
    #img {
        background-color: blue; 
    }
button {
        margin: auto;
    }
}

关于only关键字，以下是Mozilla开发者网络所说的内容：

唯一的关键字可以阻止不支持具有媒体功能的媒体查询的旧浏览器应用给定的样式：

<强> <link rel="stylesheet" media="only screen and (color)" href="example.css" />

Learn more about Media Queries here.

Answer 2

您的代码错误，因为关键字'仅限。关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

您可以在w3.org查看此信息：http://www.w3.org/TR/css3-mediaqueries/#media0 - 示例9

更有效地应用媒体查询

2 个答案:

Learn more about Media Queries here.