この記事では、CSS3 のメディア クエリの概要を紹介します。これは一定の参考価値があり、皆さんの学習に役立つことを願っています。
レスポンシブ Web デザインは現在ますます人気が高まっていますが、レスポンシブ デザインには読み込みの遅さなど、レスポンシブ デザイン自体の問題もいくつかあります。しかし、この問題を非常にうまく解決する方法があり、メディア クエリ方法を使用して、さまざまなデバイスにスタイルを適応させる問題を解決できます。次に、それを記事で詳しく紹介します。
【おすすめコース: CSS3チュートリアル】
メディアクエリ
CSS3 のメディア クエリは、ユーザーのデバイスのサイズに応じてさまざまなスタイルを呼び出すことができます。これは、さまざまなコンテンツをさまざまなデバイスに提供するためのシンプルで効率的な方法であり、最も一般的に使用されるクエリは、ビューポートの高さと幅を処理するものです。
メディア クエリは次の目的で使用できます:
(1) CSS @media と at-rules を使用して条件付きでスタイルを適用します。
(2) 特定のメディアの 、
(3) メディアのステータスをテストおよび監視するには、Window.matchMedia() メソッドと JavaScript メソッドを使用します。
メディア タイプ
all: すべてのデバイスで動作します。
print: ページ分割された資料および文書を印刷プレビュー モードで画面上に表示する場合。
screen: 主にスクリーンに適しています。
speech: 主に音声合成に適しています。
メディア関数
スペースの問題のため、ここではメディア クエリ関数の一部のみを紹介します。
説明 | |
表示幅 |
|
視覚的な高さ | |
ビューポートのアスペクト比アスペクト比 | |
ビューポートの方向 | |
出力デバイスのピクセル密度 | |
透明度設定 | |
デバイスがグリッド画面を使用するかビットマップ画面を使用するか | |
出力デバイスがコンテンツの外観を変更する頻度 | |
出力デバイスがエッジを処理します。ブロック軸のコンテンツがビューポートからオーバーフローします。 | |
ビューポートのコンテンツがインライン軸に沿ってオーバーフローできます。 |
@media (min-width: 30em) and (orientation: landscape) { ... }
例:
<style> @media (max-width: 960px){ body{ background: pink; } } </style>
以上がCSS3のメディアクエリとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。