CSS メディア クエリはどのような用途に使用されますか?

CSS メディア クエリの役割: メディア クエリを使用すると、ビューポートの幅、画面比率、デバイスの向きなど、デバイス ディスプレイの特性に基づいてデバイス ディスプレイの CSS スタイルを設定できます。クエリはメディア タイプと 1 つ、またはメディア特性を検出するための複数の条件式で構成されます。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(学習ビデオ共有: css ビデオ チュートリアル)

CSS メディア クエリの役割:

1. とはメディア クエリ

メディア クエリを使用すると、デバイスの特性 (ビューポートの幅、画面比率、デバイスの向き: 横または縦など) に基づいてデバイス表示の CSS スタイルを設定できます。メディア クエリは、メディア タイプと 1 つまたは複数のメディア タイプで構成されます。詳細 メディアの特性を検出するための条件式で構成されます。メディア クエリで検出できるメディア プロパティは、 width 、 height 、 color (など) です。メディア クエリを使用すると、ページのコンテンツを変更せずに、特定の出力デバイスの表示効果をカスタマイズできます。

2. CSS ファイルにメディア クエリを導入する方法

メディア クエリは CSS スタイル コードの最後に記述されます。CSS はカスケード スタイル シートです。同じ特殊性の下で、後のスタイルも前のスタイルとオーバーラップします。

3. メディアの使用方法

モバイル デバイスの表示効果と互換性を持たせるには、HTML ドキュメントに次のコードを追加する必要があります

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

ps:

width =device-width: 幅は現在のデバイスの幅と同じです

initial-scale=1: 初期スケーリング率 (デフォルトは 1)

maximum- scale=1: ユーザーが最大スケールにズームできるようにします (デフォルトは 1)

user-scalable=no: ユーザーは手動でスケールを変更できません

4. CSS レスポンシブ メディア クエリを記述する方法CSS ファイル

例:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

ps:

このメディア クエリの意味は次のとおりです: デバイスの画面幅が 320px から 720px の間の場合、ボディの背景色メディアクエリの本文の背景色 (background-color: red;) 前の本文の背景色と重複します デバイスの画面幅が 320px 未満の場合、メディアクエリの本文の背景色 (background-color: blue;)前のボディの背景色を重ねます。

関連する推奨事項: CSS チュートリアル

以上がCSS メディア クエリはどのような用途に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。