CSS メディア クエリ プロパティの調査: @media および min-device-width/max-device-width

CSS メディア クエリ属性の調査: @media および min-device-width/max-device-width、特定のコード例が必要です

はじめに:
Withモバイルデバイスの普及に伴い、Web サイトのレスポンシブデザインの重要性がますます高まっています。レスポンシブ デザインを実装する場合、CSS メディア クエリ プロパティが重要な役割を果たします。この記事では、@media および min-device-width/max-device-width メディア クエリ プロパティを詳しく調べ、具体的なコード例を示します。

1. @media メディア クエリ属性:
@media は CSS3 によって導入されたメディア クエリ属性で、さまざまなメディア デバイスや画面パラメータに応じてさまざまなスタイル ルールを適用できます。一般的に使用されるメディアの種類には、画面、印刷、音声などが含まれ、一般的に使用されるメディアの特性には、幅、高さ、色、解像度などが含まれます。

以下は、@media 属性を使用してさまざまな画面サイズに適応する例です:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 1201px) {
  body {
    background-color: lightgray;
  }
}

上記のコード例では、画面幅が 600px 以下の場合、body 背景色は水色、画面幅が 601px ～ 1200px の範囲の場合、body 背景色は水色、画面幅がそれ以上の場合は、 1201px、body の背景色はライトグレーです。

@media メディア クエリ属性を使用すると、画面サイズに応じてレイアウトやスタイルを柔軟に調整できるため、さまざまなデバイスでページを適切に表示できます。

2. min-device-width/max-device-width メディア クエリ属性:
min-device-width および max-device-width メディア クエリ属性は、min-width および max-device-width と同じです。幅も同様ですが、前者はデバイスの物理サイズに基づいて計算され、後者はブラウザ ウィンドウのサイズに基づいて計算されます。

次は、min-device-width プロパティと max-device-width プロパティを使用して、さまざまなデバイスの画面サイズに適応する例です。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    background-color: lightblue;
  }
}
@media only screen and (min-device-width: 1025px) and (max-device-width: 1440px) {
  body {
    background-color: lightgreen;
  }
}
@media only screen and (min-device-width: 1441px) {
  body {
    background-color: lightgray;
  }
}

上記のコード例では、デバイスが画面幅は 768px デバイスの画面幅が 1025px ～ 1440px の場合、body の背景色は薄緑色、デバイスの画面幅が 1441px 以上の場合、 の背景色本体はライトグレーです。 ページがさまざまなデバイスに適応できるように、メディア クエリの min-device-width プロパティと max-device-width プロパティを使用して、デバイスの物理サイズに応じてレイアウトとスタイルを調整します。

結論:

CSS メディア クエリ プロパティは、レスポンシブ デザインを実装するときに非常に便利なツールです。この記事では、@media および min-device-width/max-device-width メディア クエリ プロパティについて詳しく説明し、具体的なコード例を示します。これらのプロパティを柔軟に活用することで、画面サイズやデバイスの物理的なサイズに合わせてスタイルやレイアウトを調整することができ、優れたレスポンシブデザイン効果を実現します。

参考:

MDN Web ドキュメント: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

以上がCSS メディア クエリ プロパティの調査: @media および min-device-width/max-device-widthの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。