媒体查询不根据大小变化，始终显示蓝色背景

Question

* {
  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 */
  }
}

Answer 1

请添加这个

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

在您的 header 中，以便让浏览器知道媒体查询将被评估的规模

Answer 2

你必须把

在你 index.html 文件中这样的标签

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

<body>

</body>


</html>

媒体查询不根据大小变化，始终显示蓝色背景

Media Queries not changing according to size , always showing blue background

html

css

background-color

media-queries

responsive