我写了一个示例代码来尝试在 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>
但媒体查询不起作用。我哪里错了？
最佳答案
如果您是在计算机上查看查询，那么您的查询没有任何问题。记住这个: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 开发者网络是这样说的:
only 关键字阻止不支持具有媒体功能的媒体查询的旧版浏览器应用给定样式:
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Learn more about Media Queries here.
关于javascript - 更有效地应用媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26715991/