最大宽度不适用于移动广告

Question

我正在尝试使用@media制作响应式布局。我正在通过chrome dev工具测试它，并且当通过点击 f12 （打开开发工具）时，在chrome上测试移动设备时，移动屏幕尺寸无效 在chrome）然后点击 ctr + Shift + M 。

调整大小时，@media (max-width: 480px)永远不会被切换。我做错了什么，我该如何解决？

Codepen

/* Width is less than x*/

@media (max-width: 480px) {
  body {
    background-color: blue;
  }
}
/* Width is greater than x*/

@media (min-width: 480px) {
  body {
    background-color: green;
  }
}
/* Width is greater than x*/

@media (min-width: 1024px) {
  body {
    background-color: orange;
  }
}

Answer 1

您是否在index.html中包含了meta视口标记？

<meta name="viewport" content="width=device-width">

Answer 2

对我来说很好，也许你希望第一个查询应用于480px？只需将最小宽度增加到481px就可以了。

/* Width is equals or less than x*/

@media (max-width: 480px) {
  body {
    background-color: blue;
  }
}
/* Width is equals or greater than x*/

@media (min-width: 481px) {
  body {
    background-color: green;
  }
}
/* Width is equals or greater than x*/

@media (min-width: 1024px) {
  body {
    background-color: orange;
  }
}