メディアクエリは機能しませんが、他のページでは動作しています

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

    <style> 
     html{margin:0px;padding:0px;} 
     body{margin:0px;padding:0px;box-sizing: border-box; 
      } 
     .navigation-bar{ 
      display:block;width:100%;position:fixed;background-color:rgba(55,55,55,1); 
      color:white;box-sizing: border-box;margin:0px auto;text-align: center;padding:0px; 
      } 

     .navigation-list li{display:inline-block;max-width:180px;margin-right:auto;list-style-type: none;padding:10px;position:relative;font-size:25px;border-bottom:0px solid white; transition:border-bottom 0.3s; 
     } 

     .navigation-list li:hover{border-bottom:2px solid white; 
     } 
     .navigation-list li:after{margin:auto; content:"";width:0%;height:3px;display:block;background:transparent;transition:width 0.5s,background-color 0.5s 
     } 
     .navigation-list li:hover:after{width:100%;background-color: aqua; 
     } 
     .nav{background-color: black;width:500px;display:block;position: relative;} 
     @media only screen and(max-width:520px){ 

      .navigation-bar{top:0px;left:0px;width:200px;} 

     } 
    </style> 
</head> 
<body> 
    <div class="navigation-bar"> 

     <ul class="navigation-list"> 
      <li>Home</li> 
      <li>Directory</li> 
      <li>PlacesToExplore</li> 
      <li>Services</li> 
      <li>NearestPlaces</li>     
     </ul> 
    </div>  
</body>

このページのメディアクエリは機能していませんが、同じブラウザの他のページで動作しています。ブラウザのサイズが520ピクセル未満になると、ナビゲーションバーが左に表示されます。メディアクエリは機能しませんが、他のページでは動作しています

出典

2017-12-30 Aman Rathore

メディアクエリが正しく動作します。 CSSの問題は、ブロックごとにliを指定することができます。

@media (max-width:520px){ 
.navigation-list li{ 
    display: block; 
} 
}

出典

2017-12-30 13:27:07

それは変えるだけ働いていた「だけ画面と@media（最大幅：520px）{}」ちょうど「@media（最大幅）」それはそうである理由.Butは、私が理解することはできません。私が "@media only screen"を使った他のページでは、うまくいきましたが、今は他の構文が必要ですか？ –

メディアクエリは機能しませんが、他のページでは動作しています

答えて

関連する問題