cssでのメディアクエリが正しく動作しない

Question

私のWebページでこのコードを使用していますが、min-widthに異なる設定を試しましたが、最小幅のメディアクエリからのみ値を取得します。

@media only screen and (min-width: 900px) { 
    li{ 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%; 
    } 
    li.one{ 
     padding-left: 13%; 
    } 
@media only screen and (min-width: 800px) { 
    li { 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%;} 
    li.two{ 
     padding-left: 9%; 
    } 
} 
@media only screen and (min-width: 600px),screen and (max-width: 601px) { 
    li { 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%; 
    } 
    li.three{ 
     padding-left: 7%; 
    } 
} 

他のクエリが正常に動作するのを止めていることがわかりません。

Answer 1

1）あなたの第三のクエリは次のように記述する必要があります。

@media only screen and (min-width: 600px) and (max-width: 601px) {... 

（カンマ2つの独立したセレクタを意味します）

2）あなたは、あなたのli要素inline要素を作りました。しかし、インライン要素はパディングを持つことができません。これらのパディング値は何にも影響しません。したがって、ディスプレイの設定をinline-blockに変更してください。

Answer 2

HTMLページ

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

Answer 3

@media screen and (min-width: 320px) { 
    //your css class 
} 
@media screen and (min-width: 321px) and (max-width:480px){ 
    //your css class 
} 

@media screen and (min-width: 481px) and (max-width:720px) { 
    //your css class 
} 

@media screen and(min-width: 721px) and (max-width:1080px) { 
    //your css class 
} 

@media screen and(min-width: 1080px) and (max-width: 1280px){ 
    //your css class 
} 

@media screen and (min-width: 1281px) and (max-width: 1920px){ 
    //your css class 
} 

このようなあなたのクエリを使用してみてくださいにこのコードを追加してください、この方法は、あなたが900のメディアクエリ内の1つのカーリーブラケットを残してきた私

Answer 4

のために働きました。このコードをコピーし、メディアクエリを置き換えます。

@media only screen and (min-width: 900px) { 
    li { 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%; 
    } 
    li.one{ 
     padding-left: 13%; 
    } 
} 

@media only screen and (min-width: 800px) { 
    li { 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%; 
    } 
    li.two{ 
     padding-left: 9%; 
    } 
} 

@media only screen and (min-width: 600px) and (max-width: 601px) { 
    li { 
     display: inline; 
     padding-left : 5%; 
     padding-right: 5%; 
    } 
    li.three{ 
     padding-left: 7%; 
    } 
} 

Answer 5

あなたの頭のタグにこれを追加し、あなたがしなかった適切なメディアクエリーのブレースを閉じて、正しくチェックしてください。

Answer 6

@mediaは、（最小幅：768px）{}これは私の作品はまた、「<メタ名=」ビューポート「コンテンツ= 『幅=デバイス幅、初期スケール= 1』 >」ヘッドタグ

に追加します

Answer 7

クエリサイズの順序を変更する必要があります。 CSSでは、最後の有効なクエリが勝つので、クエリは最小になります。最大のものが最後に来るはずです。