CSS メディア クエリ: さまざまなデバイスや画面サイズにさまざまなスタイルを適用します。

CSS メディア クエリは、Web デザインにおいて非常に便利なテクニックで、さまざまなデバイスや画面サイズに応じてさまざまなスタイルを適用できます。メディア クエリを通じて、コンピューター、タブレット、携帯電話などのユーザーが使用するデバイスの種類や、画面の幅や高さなどの要素に基づいて Web ページのレイアウトと外観を調整し、より良いコンテンツを提供できます。ユーザー体験。

CSS メディア クエリを使用する前に、いくつかの基本的な概念と使用法を理解する必要があります。まず、メディア クエリは CSS3 の機能であることを明確にする必要があるため、ブラウザが適切に動作するには CSS3 をサポートする必要があります。

メディア クエリは @media ルールを使用して定義され、通常は最初に読み込まれるように CSS ファイルの先頭に記述されます。メディア クエリの構文は次のとおりです:

@media mediatype と (条件) {
CSS style
}

このうち、mediatype はメディア タイプを表します。いくつかのタイプがあります:

• all: すべてのメディア デバイスに適しています;
• screen: コンピュータ画面に適しています;
• print: プリンタおよび印刷プレビューに適しています;
• ハンドヘルド: 携帯電話やタブレットなどのハンドヘルド デバイスに適しています。

条件部分はメディア クエリの中核であり、条件を満たすデバイスまたは画面サイズをフィルターで除外するために使用されます。条件には、一般的に使用される次の属性を含めることができます:

• width: 画面の幅;
• height: 画面の高さ;
• device-width: デバイスの幅;
• device-height: デバイスの高さ;
• orientation: 画面の向き;
• aspect-ratio: 画面のアスペクト比;
• resolution: 画面の解像度。

メディア クエリを使用してさまざまなデバイスや画面サイズに適応する方法を示す具体的なコード例をいくつか示します:

1. 大画面デバイスに特定のスタイルを適用します:

@メディア画面と (min-width: 1200px) {
/ 画面幅が 1200px 以上の場合に適用されるスタイル {

  font-size: 18px;

}

}

小さな画面デバイスに特定のスタイルを適用します:

@メディア画面と (最大幅: 767px) {

/
画面幅が 767px/ 以下の場合に適用されるスタイル body {

  font-size: 14px;

}

}

特定のスタイルを適用する横画面表示の場合:

@メディア画面と (向き: 横向き) {

/
横向きで表示される場合に適用されるスタイル/ 本体 {

  background-color: yellow;

}

}

メディア クエリを複数の条件と組み合わせて使用​​します:

@media screen and (min-width: 768px) and (max) -width: 1199px) {

/
画面幅が 768px ～ 1199px の場合に適用されるスタイル / body {

  font-size: 16px;

}

}

上記を渡す例として、メディア クエリはさまざまなデバイスや画面サイズに応じてさまざまなスタイルを適用でき、それによって Web ページのレスポンシブ デザインを実現できることがわかります。メディア クエリを柔軟に使用することで、さまざまなデバイスのユーザーに優れたユーザー エクスペリエンスを提供し、コンピューター、タブレット、携帯電話のいずれにおいても優れたインターフェイス表示効果を実現できます。

もちろん、メディア クエリはレスポンシブ デザインの一部にすぎず、完全なレスポンシブ Web デザインを完成させるには、他のテクノロジーと実践を組み合わせる必要があります。実際のアプリケーションでは、プロジェクトのニーズとユーザー グループに基づいて適切なメディア クエリ条件を選択し、対応する CSS スタイルを記述して、最適なレスポンシブ デザインを実現できます。

以上がCSS メディア クエリ: さまざまなデバイスや画面サイズにさまざまなスタイルを適用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。