媒体查询没有根据大小更改,始终显示蓝色背景

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Mobile Styles */

@media only screen and (min-width:0px) and (max-width: 400px) {
  body {
    background-color: #F09A9D;
    /* Red */
  }
}


/* Tablet Styles */

@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    background-color: #F5CF8E;
    /* Yellow */
  }
}


/* Desktop Styles */

@media only screen and (min-width: 961px) {
  body {
    background-color: #B2D6FF;
    /* Blue */
  }
}

haixiakeji 回答:媒体查询没有根据大小更改,始终显示蓝色背景

您必须放

在您这样的标记中的index.html文件中

<html>
<head>
 <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>

</body>


</html>
,

请添加

<meta name="viewport" content="width=device-width,initial-scale=1">

在标题中,以便让浏览器知道媒体查询的评估范围

本文链接:https://www.f2er.com/3081565.html

大家都在问