CSS媒体查询问题

Question

嘿，我目前正在与网站上的媒体查询有关的所有人。我需要建立一个网站，根据设备的屏幕尺寸更改某些内容。

我已经从互联网复制了媒体查询，并添加了Meta视口。我的朋友有完全一样的东西，并且在这里工作正常。我添加了一些代码作为参考。这应该工作正常吗？

有人可以告诉我为什么吗？

/*Mobile media query*/
@media only screen and (max-width: 360px) {
    .blue_box2{
      display:none;
  }
}

我的HTML视口：

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

Answer 1

此媒体查询（或HTML中的任何内联样式）之外是否有任何冲突的代码，可能导致其无法正常运行？

您显示的查询工作正常，这使我相信您未显示的代码存在问题。

HTML

<div class="blue_box2" style="width:200px; height:200px;">
</div>

CSS

.blue_box2 { background:red; }

@media only screen and (max-width: 360px) {
  .blue_box2 {
    background:blue;
  }
}

只是一个想法： 您是否正在使用Google Chromes开发人员工具（F12）进行此测试，因为通常仅将浏览器窗口缩小可能不会达到360px。

Answer 2

您尝试过以下方法吗？：

@media only screen and (max-width: 360px) {
.blue_box2{
  display:none !important;

} }

或者这个：

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

除非我输入1.0，否则我的视口将无法工作。只是想知道是否同样的事情正在发生。