CSS はレスポンシブ デザインに @media メディア クエリを使用します。メディア クエリとは何ですか?

インターネットの発達により、スマートフォンやタブレットなどのさまざまなモバイルデバイスがどこでも見られるようになりました。では、Web サイトをさまざまなモバイル デバイスで適切にレイアウトするにはどうすればよいでしょうか? デバイスごとに一連のコードを記述するのは面倒で、多くの作業が必要です。次に、賢明なプログラマーは一連のコードを使用して、さまざまなサイズのデバイス上で Web サイトを適切に表示できるようにします。そこで、「メディアクエリ」を中核とするレスポンシブデザインモデルが誕生しました。

1. メディア クエリとは何ですか?

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

@media クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。 @media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページも再レンダリングされます。

2. @media メディア クエリの使用

a. モバイル デバイスの表示効果と互換性を持たせるために、次のコードを HTML ドキュメントに追加します

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

width=device-width: 幅は現在のデバイスの幅
initial-scale=1: 初期ズーム率 (デフォルトは 1)
maximum-scale=1: ユーザーが最大倍率までズームできるようにする (デフォルトは 1)
user-scalable=no: ユーザーは手動でズームすることはできないズーム

b. CSS ファイルでレスポンシブ メディア クエリを作成します

基本的な構文: @media メディア タイプと (メディア特性) {style}

例 1:

@media screen and (max-width:480px){
body {
background:red
  }
}

の意味: 画面が 480 ピクセル以下の場合、ページの背景色が赤になります。

例 2:

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

は、画面が 900px 以上の場合、ページ上のフォント サイズは 20px になることを意味します。

例3:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

は、画面が600px~900pxの場合、本体の背景色は「#f5f5f5」を意味します。

概要: 上記では、メディア クエリ @media とは何かを紹介し、メディア クエリの使用方法の例を示しています。

以上がCSS はレスポンシブ デザインに @media メディア クエリを使用します。メディア クエリとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。