CSS3メディアが機能しない問題を解決する方法

解決策: 1. メディアの書き込み形式が「@media screen and (css style){}」であることを確認します。2. スタイルが競合していないか確認します。3. メタ タグの viewport 属性を設定します。4メディアの後には次の文字が続きます。括弧内の内容には終了文字「;」を含めることはできません。ある場合は削除する必要があります。

#このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、Dell G3 コンピューター。

css3 @media が機能しない理由の概要

まず、メディア クエリが機能しないのではなく、CSS 自体に問題があるかどうかを確認します。たとえば、

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

外部スタイルではcssで使用するsrcを導入していますが、ケアレスミスです

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

cssの問題であれば、具体的な問題を詳細に分析することしかできません。

トラブルシューティングを行うには、次のエラーに従ってください。

最初のエラー: 形式が正しく書かれていないため、その後にスペースが必要です。たとえば、次のコード;

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

2 つ目のエラー: スタイルの競合、@ のスタイルメディア クエリ コードは後続の CSS によって上書きされます

注: CSS を記述するプロセスでは、前の CSS によって上書きされないように、@media クエリを含む CSS を最後に記述することをお勧めします

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

注: これは非常に一般的なエラーです。たとえば、フローティング ブロック要素により、親要素にこのとき、親要素に背景色を追加しても反映されず、実際にはcssが原因であり、エラーは表示されません。

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

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

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

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

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

以上がCSS3メディアが機能しない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。