@media（最大寬度：767像素）{/ * content * /}不起作用

Question

所以我試圖使我的網頁具有響應性，而幾天前，我發現使網頁具有響應性的主要css修改是@media規則，現在的問題是

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

bootstrap-sensitive.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的屬性為

 .dropdown-content{
    display:none;
    }

當我將鼠標懸停在下拉菜單時，以下代碼將采取措施

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

而在移動窗口版本中，我想再次將其隱藏，以便在下拉菜單上懸停時不會顯示下拉菜單內容

Answer 1

您需要使用此@media only screen and (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> 

Answer 2

單擊帶有“ RUN CODE SNIPPET”的右擴展，您將找到工作示例。

另請參閱此鏈接 。

嘗試這個：

 body { height: 100%; margin: 0; font-family: 'Unica One', sans-serif; background: #fff; } #main-nav li:hover ul{display:block;} h1{font-size:25px;} .navbar-toggle span{background:#000;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <nav id="header" class="container"> <div id="navi" class="navbar-header"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar b1"></span> <span class="icon-bar b2"></span> <span class="icon-bar b3"></span> </button> <h1 class="pull-left"><a href="#">BRAND NAME</a></h1> <div class="navbar-collapse collapse"> <ul id="main-nav" class="nav navbar-nav navbar-right"> <li><a href="#">Link1</a></li> <li class="dropdown"> <a href="policies.php">Policy <i class="fa fa-caret-down"></i></a> <ul class="dropdown-menu dropdown-content"> <li><a href="#">Link4</a></li> <li><a href="#">Link4</a></li> </ul> </li> <li><a href="#">Link4</a></li> <li><a href="#">Link4</a></li> </ul> </div> </div> </div> </nav>