Question

    @media all and (min-width: 641px) {
  .small-screen {
    display: none;
    }
  }


<div class="small-screen">
  <h1 id="club-offcial-name-small">Hercules Club</h1>
  <h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
  </div>

。当小于640px时，.small-screen仍然存在。

伙计们，这里的总菜鸟在这里严重受伤：/

Answer 1

我认为这只是一个浏览器支持问题。在Chrome（codepen）中，它对我来说非常适合。您使用的是哪种浏览器？以下是媒体查询支持表：http://caniuse.com/#search=%40media

Codepen: http://codepen.io/anon/pen/ZWYLBJ

Answer 2

好的，我想我知道你的问题。你需要在css代码周围添加一个样式标记，如下所示：

<!DOCTYPE html>
<html>
<head>
 <style>
@media all and (min-width: 641px) {
.small-screen {
display: none;
}
}
 </style>
</head>
<body>

 <div class="small-screen">
  <h1 id="club-offcial-name-small">Hercules Club</h1>
  <h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
 </div>

</body>
</html>

Answer 3

试试这个

 @media only screen and (min-width: 641px) {
 .small-screen {
 display: none!important;
   }
 }

如果您发现它有用，请将此标记为您问题的已接受答案。谢谢。

display：none;应用媒体查询后不影响div

3 个答案: