@media screen andが機能しない原因のまとめ.(転載)

@media screen andが機能しない原因のまとめ.
まず、css自体の問題ではなく、メディアクエリが有効ではないことを確認します.たとえば

div{display:flex;}/*  div   display        */

 
1つ目のエラー:フォーマットの書き込みエラーandの後ろには、次のコードなどのスペースが必要です.

@media screen and (max-width:500px){ }

 
2つ目のエラー:スタイルの競合;@Mediaクエリーコードのスタイルは後ろのcssで上書きされます
注意:cssを書く過程で、@mediaクエリーバンドのcssを後ろに書くことをお勧めします.これにより、前のcssに上書きされないようにします.
 
3つ目のエラー:css自体に問題が発生し、cssが有効にならない
注:これは、ブロック要素のフローティングによって親要素の高さがなくなるなど、よくあるエラーです.このとき、親要素にバックグラウンドカラーを付けると、実際にはcssによるエラーであり、表示されません.
例えば、cssの選択の優先度は、そのうちの1つに対して有効ではなく、別の1つに対して有効ではないなど、cssエラーによる問題も多く、一つ一つ列挙しません.
 
4つ目のエラー:meta属性viewport属性、これは基本的な常識ですが、漏れている人もいるはずです

 
5つ目のエラー:括弧の内容は終了文字";"を書くことができません.その他のエラー.
 
解決策:
解決策はたくさんありますが、css排除法を使って、cssを使って一部を注釈することをお勧めします.
もちろんブラウザもコードを見て問題を解決する方法です.

@media screen and (max-width:200px){
/*       */
}

以下、詳しく紹介しますcss@mediaの双曲線コサインを返します.
CSS 2ではmedia typesのみ利用可能であるが、CSS 3ではmedia typesとmedia featureの2つのメイン部分を合わせてmedia queriesと呼ばれ、ブラウザ、タブレット、携帯電話の幅を判断する処理に用いられる.文法は

@media not|only mediatype and (media feature) {
    CSS-Code;
}

Mediatypeは通常screenで実用化されることが多く、media featureはmin-widthまたはmax-widthで実用化されることが多い.1、media queriesクエリ条件の使用Queryの構文は4つしかありません:and、or、not、only(1)、and User AngentがscreenでBrowser幅が500 px(含む)以上であれば、このcss設定を適用します:

@media screen and (min-width:500px) {
    CSS-Code;
}

 
(2)、or or用法ここではUser AngentがscreenでBrowser幅が500 px(含む)以上の場合、またはカラープロジェクターの場合、このcss設定を当てはめます.and優先度はorより高いことに注意してください.

@media screen and (min-width:500px) , projection and (color) {
    CSS-Code;
}

 
(3)、not notは負の論理を意味し、カラースクリーンはcss設定を適用せず、カラープリント機会はcss設定を適用する

@media not screen and (color), print and (color) {
    CSS-Code;
}

書き方を変えるとand,or,not演算元の優先権が明らかになる

@media (not (screen and (color))), print and (color) {
    CSS-Code;
}

 
(4)、only特定のUser Angentがあなたが書いたCSS-Codeを支援していないことを事前に知っていれば、onlyを使って彼を避け、あなたが書いたCSS-Codeを支援するUser Angentに専念して実行させることができます.カラースクリーンを備えたUser Angentは、私が書いたCSS-Code(example.css)をそのまま使用し、他の形態のUser Angentについては判断する必要はありません.

その結果、キーワード「only」がないのと同じですが、判断過程には違いがあります.