モバイル開発のためのメディアクエリ
メディアクエリとは何ですか？
メディアクエリはCSS3の新しい構文です。
- @mediaクエリを使用すると、メディアタイプごとに異なるスタイルを定義できます
- @mediaは、画面サイズごとに異なるスタイルを設定できます
- ブラウザのサイズをリセットすると、ブラウザの幅と高さに応じてページが再レンダリングされます
- メディアクエリは現在、多くのApple電話、Android電話、タブレット、その他のデバイスで使用されています
メディアクエリ構文
- @mediaの先頭にある@記号に注意してください
- メディアタイプメディアタイプ
- and | not | only：または（2つの条件が同時に満たされることを意味します）; not（後者の条件が満たされないことを意味します）; only（後者の条件でのみ実行できます）
- メディア機能：メディア機能（デバイスの状態）を示すために括弧が存在する必要があることに注意してください
文法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
使用法
// 1.在css语句中使用
@media screen and (max-width: 400px) {
// 这里写你在当前条件下想要展示的样式
.inner {
height: 100px;
width: 25%;
background-color: brown;
}
}
// 2.在引入css样式的link语句中写入
// 表示在符合的条件下引入
<link rel="stylesheet" media="screen and (max-width: 400px)" href="mystylesheet.css">
メディアタイプ値
mediatypeは、さまざまな端末デバイスをメディアタイプと呼ばれるさまざまなタイプに分割します
-
すべて：すべてのデバイス用
-
印刷：プリンターおよび印刷プレビュー用
-
画面：コンピューター画面、タブレット、スマートフォンなどに使用されます。
-
スピーチ：スクリーン読み上げ音響機器に適用
and | not | only（キーワード）
- キーワードは、メディアクエリの条件として、メディアタイプまたは複数のメディア特性を結び付けます。
メディア機能値
| アスペクト比 | 出力デバイスのページの表示領域の高さに対する幅の比率を定義します |
|---|---|
| 色 | 出力デバイスの各セットのカラー原稿の数を定義します。カラーデバイスでない場合、値は0になります |
| カラーインデックス | 出力デバイスのカラールックアップテーブルのエントリ数を定義します。カラールックアップテーブルが使用されていない場合、値は0になります |
| デバイスのアスペクト比 | 出力デバイスの画面の高さに対する表示幅の比率を定義します。 |
| デバイスの高さ | 出力デバイスの画面の表示される高さを定義します。 |
| デバイス幅 | 出力デバイスの画面の表示幅を定義します。 |
| グリッド | 出力デバイスがラスターまたはドットマトリックスのどちらを使用しているかを照会するために使用されます。 |
| 高さ | 出力デバイスのページの表示領域の高さを定義します。 |
| 最大アスペクト比 | 出力デバイスの画面の高さに対する表示幅の最大比率を定義します。 |
| 最大色 | 出力デバイスの各セットのカラー原稿の最大数を定義します。 |
| max-color-index | 出力デバイスのカラールックアップテーブルのエントリの最大数を定義します。 |
| max-device-aspect-ratio | 出力デバイスの画面の高さに対する表示幅の最大比率を定義します。 |
| max-device-height | 出力デバイスの画面の最大高さを定義します。 |
| max-device-width | 出力デバイスの画面の最大表示幅を定義します。 |
| 最大高さ | 出力デバイスでページの最大表示領域の高さを定義します。 |
| max-モノクロ | モノクロフレームバッファの各ピクセルに含まれるモノクロ原稿の最大数を定義します。 |
| 最大解像度 | デバイスの最大解像度を定義します。 |
| 最大幅 | 出力デバイスでページの最大表示領域幅を定義します。 |
| 最小アスペクト比 | 出力デバイスのページの表示領域の高さに対する幅の最小比率を定義します。 |
| 最小色 | 出力デバイスの各セットのカラー原稿の最小数を定義します。 |
| min-color-index | 出力デバイスのカラールックアップテーブルのエントリの最小数を定義します。 |
| min-device-aspect-ratio | 出力デバイスの画面の高さに対する表示幅の最小比率を定義します。 |
| 最小デバイス幅 | 出力デバイスの画面の最小表示幅を定義します。 |
| min-device-height | 出力デバイスの画面の最小表示高さを定義します。 |
| 最小の高さ | 出力デバイスでページの最小表示領域の高さを定義します。 |
| 最小-モノクロ | モノクロフレームバッファの各ピクセルに含まれるモノクロ原稿の最小数を定義します |
| 最小解像度 | デバイスの最小解像度を定義します。 |
| 最小幅 | 出力デバイスでページの最小表示領域幅を定義します。 |
| モノクロ | モノクロフレームバッファの各ピクセルに含まれるモノクロ原稿の数を定義します。モノクロデバイスでない場合、値は0になります |
| オリエンテーション | 出力デバイスのページの表示領域の高さが幅以上であるかどうかを定義します。 |
| 解決 | デバイスの解像度を定義します。例：96dpi、300dpi、118dpcm |
| スキャン | TV機器のスキャンプロセスを定義します。 |
| 幅 | 出力デバイスのページの表示領域の幅を定義します。 |
メディアクエリの記述ルール
- 混乱を防ぐために、メディアクエリを昇順または降順で記述する必要がありますが、コードがより簡潔になるように、昇順で記述するのがお気に入りです。
- メディアクエリを使用して、さまざまな画面をさまざまなスタイルに適合させ、法則を判断として省略できることを見つけます
- 原則は、後ろに積み重ねられるスタイルを使用することです
注意：
- モバイル端末の開発では、要素の動的なサイズ変更を実現するために、メディアクエリ+レムをマスターする必要があります