レスポンシブ レイアウトのための CSS3 メディア クエリの詳細な紹介

CSS3 を使用してレスポンシブ レイアウトを実装します

フレキシブル ボックスだけでは十分ではありません
CSS3 は、モジュール関数を追加して、メディア属性も拡張します
メディア クエリメディア クエリ関数

メディア クエリの概要

モバイル端末の急速な普及に伴い、スマートフォンやタブレットなどを使用してページを閲覧するユーザーが増えています
すべてユーザーのニーズを考慮しています
ユーザーがさまざまなデバイスでページを閲覧できる快適なエクスペリエンスを確保する必要があります
このように、メディアクエリが必要です
これにより、さまざまなデバイスまたはさまざまな条件のデバイスに異なるスタイルを設定できます
ただし、モバイル端末に非常に重要なニーズがある場合は、モバイル端末用の特別なページを開発する方が良いです
メディア クエリ メソッドの導入を見てみましょう

メディア クエリはファイルを選択的に読み込みます

まず、リンク メソッドを見てみましょう

これは CSS2 でのアプローチです

さまざまなスタイル シートを導入するには、link タグとメディア属性を使用します (if条件は満たされています)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

ここで 2 つ紹介します 2 つの概念があります

1 つは

メディア タイプ
(Media Type)、画面はこちら 、もう 1 つは メディア特性
(Media Query)、最大幅はこちらですは: 600px Media Query は CSS3 の Media Type の拡張版です

実際 Media Query は Media Type (判定条件) + CSS (条件を満たすスタイルルール) と考えることができます

このコードの翻訳は

Ifメディアメディアはスクリーンタイプで、ウィンドウ幅は≤600pxです。demo.cssスタイルファイルを導入します

メディアクエリは選択的にスタイルを追加します

CSS3で行うことは、@mediaルールを使用してCSSファイルにさまざまなスタイルを追加することです

リンクと比較して、ページリクエストを減らすことができ、より良い結果が得られます

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

他のメディアクエリの紹介

非常に多くのメディアクエリがありますが、あまり多くを知る必要はありません。一般的に使用されるのは次の 2 つだけです。 @import ではメディア クエリも使用できます

メディア プロパティ部分の指定には括弧の使用が必要です

@import url(demo.css) screen;

スタイルは 601px 〜 800px の画面に適用されます

メディア クエリは代替を指定しないか、指定しません。メディア関数ですが、カンマ区切りのリストを使用できます

media="screen and (min-width: 601px) and (max-width: 800px)"

スタイルは 601px+ の画面に適用されます

幅 6 インチ以上の用紙を備えた印刷デバイスを使用します

---

メディアクエリでは否定的な条件を指定できます

キーワードはメディアステートメントの先頭にありません

単一の条件の前に個別に宣言することはできません。メディア全体の宣言を無効にするものではないことに注意してください

media="screen and (min-width: 601px), print and (min-width: 6in)"

スタイルは、600px~800px の範囲にない画面に適用されます

---

not キーワードには、only もあります
初期のブラウザからメディア クエリを隠すために使用されます

not と同様に、先頭のメディア宣言ステートメントで宣言する必要があります

たとえば、次のステートメント

media="not screen and (min-width: 600px) and (max-width: 800px)"

---

初期のブラウザはmedia="screen" として理解します

メディアの特性を理解していないため、すべての画面デバイスに適用されます スタイル ルール
ただし、唯一のキーワード

media="screen and (min-width: 601px) and (max-width: 800px)"

を使用します
初期のブラウザはこれを media="only"

ただし、唯一のメディア タイプが存在しないため、スタイルは適用されません

初期のブラウザからメディア クエリを非表示にする機能が実装されました media="screen"
由于它不理解媒体特性，所以它会对所有屏幕设备应用样式规则
但是使用了only关键字

media="only screen and (min-width: 601px) and (max-width: 800px)"

早期浏览器会把它理解为media="only"
メディア タイプとメディアの特性

メディア タイプ

メディア タイプのキーワードはたくさんありますが、そのほとんどは放棄されています (誰が使用するか)

一般的に使用されるものは、

all

、screen、print です

メディア タイプ説明すべてすべてのメディアデバイス画面カラースクリーン:コンピューター、タブレット、スマートフォン...印刷プリンター、印刷プレビュー音声発生デバイス: スクリーンリーダー..音声 (非推奨) 音声とシンセサイザー点字 (非推奨) ) 点字プリンターハンドヘルド (廃止)ポータブル デバイス: 小型電話... (廃止) 投影装置: スライド..tty (廃止) 固定密度文字グリッドを使用するメディア: テレタイプライターと端末..tv(廃止) TV タイプ設備: テレビ、インターネット TV..

メディア機能

メディア機能はたくさんありますが、使用されていないものもたくさんあります

オーディオ
	投影

height出力デバイスの画面に表示される高さmax-height出力デバイスのページの最大表示領域の高さchr含まれるピクセルごとのモノクロオリジナルの最大数モノクロのフレームmin-height表示可能な最小値出力デバイスのページの領域の高さ300dpi、118dpcmdevice-width/height はデバイスの幅です (ブラウザの幅ではありません) width/height はブラウザウィンドウのサイズです ドキュメント

メディアタイプ	説明
aspect-ratio	可視領域の幅出力デバイスのページの高さの比率は、デバイスの各セットのカラー原稿の数を出力します。カラー デバイスでない場合、値は 0 に等しくなります。
color-index	出力デバイスのカラー ルックアップ テーブルのエントリの数。カラー ルックアップ テーブルが使用されない場合、値は 0 に等しくなります
device-aspect-ratio	出力デバイスの高さに対する画面の表示幅の比率
device-
device-width	出力デバイスの画面の表示幅
grid	出力デバイスがラスターを使用するかビットマップを使用するかを問い合わせる
高さ	出力デバイスでのページの表示領域の高さ
max-aspect-ratio	出力デバイスの画面の表示幅と高さの最大比
max-color	出力デバイスの各セット内のカラー オリジナルの最大数
max-color-index	Output デバイスのカラー ルックアップ テーブル内のエントリの最大数
max-device-aspect-ratio	出力デバイスの画面に表示される幅と高さの最大比率
max-device-height	出力デバイスの画面に表示される最大の高さ
max-device-width	出力デバイスの画面
max-mono	ome
バッファ	max-resolutionデバイスの最大解像度
max-width	出力デバイスのページ最大可視領域幅
min-aspect-ratio	出力デバイスのページの表示領域の幅と高さの最小比率
min-color	出力デバイスの各セット内のカラーオリジナルの最小数
min-color- Index	デバイスのカラールックアップテーブルの最小エントリ数を出力
min-device-aspect-ratio	デバイス画面の高さに対する表示幅の最小比率を出力
min-device- width	出力デバイスの画面の最小表示幅
min-device-height	出力デバイスの画面の最小表示高さ
min-monochrome	モノクロフレームバッファー内のピクセルごとに含まれるモノクロオリジナルの最小数
min-resolution	デバイスの最小解像度
min-width	出力デバイス
monochrome	におけるページの最小可視領域幅 モノクロフレームバッファ内のピクセルごとに含まれるモノクロオリジナルの数。モノクロデバイスではない場合、値は0に等しくなります
orientation	出力デバイスのページの表示領域の高さが幅以上かどうか
resolution	デバイスの解像度。例: 96dpi、
	scanテレビ機器のスキャンプロセス
width	出力デバイスでのページの表示領域の幅
	ここで注意してください device-width /height と width/height を区別してください

を使用してください

ビューポート
の値
であるElement.clientWidth/clientHeight

以上がレスポンシブ レイアウトのための CSS3 メディア クエリの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。