css - 在 Chrome 中查看时，小设备尺寸的媒体查询不起作用

Question

帮助我的媒体查询在 chrome 中不起作用，为什么？

当我使浏览器变小时，应该将背景变成紫色。我从 w3 学校中提取了这个例子，所以我知道它应该可以工作。默认情况下，小尺寸是紫色的，没有设置媒体查询，如果达到一定的宽度尺寸，它应该变成蓝色。

body { background-color: purple; }

.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
  float: none;
  width: auto;
}
#menulist {
  margin: 0;
  padding: 0;
}
.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
  body{background-color: blue;}
}

<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>     
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.
    </p>
  </div>
</div>

标签： cssgoogle-chromemedia-queries

Answer 1

你必须检查像素率，看看你是否真的达到了媒体查询的边界。最好打开一个控制台，在右上角的Chrome中你会看到当前的分辨率。