html - @媒体(最大宽度: 767px) {/*content*/} does not work

Question

所以我试图让我的网页响应，几天前我发现使网页响应的主要 css 修改是 @media 规则 现在的问题是

@media (min-width: 768px) and (max-width: 979px) {
    .dropdown-content {
      margin-left:10%
 }
}

bootstrap-responsive.css 的这一部分，我称之为网页的平板电脑窗口版本，工作正常。但是什么时候切换到移动窗口版本即 max-width :767px; html 页面不读取它

@media (max-width: 767px) {
  .dropdown:hover .dropdown-content {
      display:none;
 }
}

这部分代码在移动窗口版本中没有阅读。我想做的是在平板电脑版本中使用上面的第一个 css 代码，在移动版本中使用上面的第二个 css 代码。它与某些 js 文件有关还是我遗漏了其他内容？请帮我解决。

编辑:- 我已经更改了上面的属性并在此处添加了一些 html 代码

<li class="dropdown">
    <a href="policies.php">Policy</a>
      <div class="dropdown-content">
        <!--dropdown-content div-->
      </div>
</li>

默认下拉内容的属性是

 .dropdown-content{
    display:none;
    }

当我将鼠标悬停在下拉菜单上时，以下代码会执行操作

    .dropdown:hover .dropdown-content{
        display:block;
    }

而在移动窗口版本中，我想再次隐藏它，这样悬停在下拉菜单上就不会显示下拉内容

Answer 1

您需要使用此 @media only 屏幕和 (max-width:767px){} 而不是 @media (max-width: 767px) {}

@media only screen and (max-width:767px) {
  .class_name { width:200px; height:200px; background:#ccc;
      /*attribute_change2;*/
 }
}

<div class="class_name"></div>