Question

我一直在努力想弄清楚发生了什么。我一直在尝试在项目上使用媒体查询，但是当使用谷歌开发者工具时他们只是没有按预期工作，我想使用切换设备工具栏来调整浏览器和样式的大小，但我的媒体查询似乎没有工作使用谷歌开发者工具？

我是否认为max-width适用于所有宽度小于或等于数字，而min-width是宽度大于或等于数字？

这是我的下面的代码。这很简单。我只是希望它在425px以下变成粉红色。

body {
  margin: 0;
}

#outer {
  display: table;
  height: 100vh;
  width: 100%;
}

#inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

@media (max-width: 425px) {
  #outer {
    background: pink;
  }
}

<div id="outer">
  <div id="inner">
    <h1>Hello World</h1>
  </div>
</div>

Answer 1

代码中的媒体查询应该按原样运行。如果您使用全屏/展开代码段链接（调整大小浏览器）

，则可以看到它正常工作

如果您没有在Chrome开发工具设备视图中使用它，则原因1是您在页面上缺少元视口，并且您正在模拟的设备具有高像素比（比率> 1）。添加元视口，您的媒体查询应按原样运行

以下是元标记

的示例

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

媒体查询不适用于Google Developer Tools

1 个答案: