CSS 媒体查询最小宽度和最大宽度不起作用

Question

链接:https://codepen.io/codepenuserpro/pen/ExQrEbo

HTML:

<div></div>

CSS:

div
{
height:400px;
width:400px;
background-color:red;
}
@media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}

为什么div不改变背景颜色，即使我调整浏览器窗口的大小在1068 - 1380px之间?

Answer 1

媒体查询语法

一个媒体查询由一个媒体类型组成，它可以包含一个或多个表达式，解析为true或false。

如果解析为true，则应用其中的css代码。

@media not|only mediatype and (expressions) {
<stylesheet>
}

必须选择元素-div在本例中，在媒体查询中如下所示。

@media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}

div {
height: 400px;
width: 400px;
background-color: red;
}
@media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}

<div></div>

Answer 2

您需要在媒体查询中选择选择器(div)。试试这个:

@media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}

Answer 3

在第二种方法中您没有选择div

你可能想要这样:

@media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}