css3 @media が機能しないのはなぜですか?理由は何ですか？

CSS3 メディアが機能しない理由: 1. viewport 属性が HTML メタ タグに設定されていない; 2. スタイルの競合、@media クエリ コードのスタイルが後続の CSS によって上書きされる; 3形式の書き込みにエラーがあります。mediah ステートメントの and の後にスペースが必要です。

このチュートリアルの動作環境: Windows10、css3、この記事はすべてのブランドのコンピューターに適用されます。

関連する推奨事項: 「CSS ビデオ チュートリアル 」

Web ページ制作では、@media screen を使用して、Web ページのレイアウトをさまざまなアクセス デバイスに合わせて調整します。 CSS に @media screen 属性を追加し、さまざまなデバイスの幅に応じて CCS スタイルを記述し、ブラウザの幅に応じてスタイル ファイルを判断し、異なる幅の値を出力するだけです。

しかし、@media メディア クエリを設定した後、それが機能しないことが判明することがあります。その理由は何ですか?どうやって対処すればいいのでしょうか？次の記事で紹介します。

css3 @media が機能しない考えられる理由

パニックにならず、ゆっくり分析してください。

まず、メディア クエリが有効になっていないのではなく、CSS 自体に問題があるかどうかを確認します。例:

div{display:flex;}/*那么div所有的display效果都将无法生效*/

最初のエラー: 形式が正しく書かれていないため、後にスペースを続ける必要があります。

たとえば、次のコード:

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

2 つのエラー: スタイルの競合。@media クエリ コードのスタイルは後続の css によって上書きされます。

注: CSS を作成するプロセス中に、CSSこれを避けるために、@media クエリを最後に記述する必要があります。前の CSS によって上書きされるのを避けます。

3 番目のエラー: CSS 自体に問題があるため、CSS が有効になりません

注: これは、次のような非常に一般的なエラーです。ブロック要素が浮動しているため、親が要素に高さがありません。このとき、親要素に背景色を追加しても効果がありませんでした。実際には、CSS によるエラーで表示されませんでした。

たとえば、CSS の選択の優先度によっても、一方が有効になり、もう一方が無効になります。CSS エラーによって引き起こされる問題は数多くあるため、個別にリストすることはしません。

4 番目の間違い: メタ属性ビューポート属性これは基本的な常識ですが、見逃している人もいるかもしれません。

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

5 番目のエラー: 括弧内の内容に終了文字「;」を含めることはできません。その他のエラーもあります。

解決策:

解決策はたくさんありますが、CSS の除外方法を使用し、CSS を使用してその一部をコメントアウトすることをお勧めします。

もちろん、ブラウザはコードを表示して問題を解決するための優れた方法でもあります。

@media screen and (max-width:200px){
/*这只是一个示例*/
}

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がcss3 @media が機能しないのはなぜですか?理由は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。