画面が大きくなったときにメディアクエリが呼び出される

Question

Wordpressで友人のためにいくつかの調整をするように求められましたが、その1つは彼のサイトに少し花盛りを加えています。私はいくつかのメディアクエリの問題が発生するまでこれはうまくいっていました。

要素の幅を変更するためにクエリを配置すると、インスペクタにすべて表示されますが、最大幅が現在の画面よりも小さいにもかかわらず、2番目のものだけが使用されていますサイズ。それは、メディアクエリに含まれていなかった場合と同じように、コードが上書きされているようなものです。

Screenshot showing code, website with current screen size and inspector indicating current styles

私は右のそれを書いたことを確認するためにバリデータを通してそれを入れている、クエリに「画面」を追加してもそれに「最小幅」を追加しようとしています。今のところ、何も働いていません。私はそれが何かばかげているに違いないと確信しています。 CSSで

@media screen and (max-width: 1199px) { 
    #section-home-inner::before { 
     width: 80%; 
    } 

    #section-home-inner::after { 
     width: 80%; 
    } 
} 

@media screen and (max-width: 868px) { 
    #logo img { 
     max-height: 99px; 
    } 

    #section-home-inner::before { 
     width: 100%; 
     margin-left: -230px; 
    } 

    #section-home-inner::after { 
     width: 100%; 
     margin-left: -230px; 
    } 
} 

Answer 1

コードに以下の記述されたスタイルは、常に上記 スタイルをオーバーライドします。だからあなたのコードの最大幅：868pxは 最大幅：1199pxの下に書かれています。その理由は、max-width：868pxがスタイル をオーバーライドしているためです。したがって、このようなコードを変更：

@media screen and (max-width: 868px) { 
     #logo img { 
      max-height: 99px; 
     } 

     #section-home-inner::before { 
      width: 100%; 
      margin-left: -230px; 
     } 

     #section-home-inner::after { 
      width: 100%; 
      margin-left: -230px; 
     } 
    }  

    @media screen and (max-width: 1199px) { 
     #section-home-inner::before { 
      width: 80%; 
     } 

     #section-home-inner::after { 
      width: 80%; 
     } 
    } 

Answer 2

は、それがスーパー愚かなものだったが判明！私が添付したスクリーンショットを見ると、カスタマイザが開いていることがわかります。これは明らかに画面の幅で考慮されていますが、実際のサイトの幅ははるかに小さくなっています。その結果、私は完全に間違ったブレークポイントを計算していました....幸運にも、仕事後の新鮮な表情と、私が間違ったことを正確に実現しました！

ありがとうございました！