レスポンシブデザイン - メディアクエリ_html/css_WEB-ITnose

メディア クエリ

メディア クエリは、IE9+、chrome、ff およびその他のブラウザのみをサポートします。IE8 より下のブラウザは、respond.js をダウンロードして引用できます。

メディアクエリによって検出できる属性:

1.width ビューポートの幅

2 .height ビューポートの高さ 3.device-width レンダリング サーフェスの幅 (私たちにとって、それはデバイス画面の幅です) 4.device-height レンダリング サーフェスの高さ (私たちにとって、それはデバイスの画面の高さです)デバイスの画面)
5. 向き デバイスが横向きか縦向きかを確認します
6.aspect-ration ビューポートの幅と高さに基づくアスペクト比
16:9 比率のディスプレイは次のように定義できます: アスペクト比: 16/9;
7.device-aspect -ration は、デバイスのレンダリング プレーンのアスペクト比に基づきます
8.color 各色のビット数 たとえば、min-color:16 は、デバイスに 16- があるかどうかを確認します。 bit color 9.color-index デバイスカラーインデックステーブルの色の数。値は負ではない整数である必要があります
10.monochrome は、モノクロ フレーム バッファー内のピクセルごとに使用されるビット数をチェックします。値は負ではない整数である必要があります
11.resolution は、画面の解像度を検出するために使用されます。プリンター、例: min-resolution:300dpi 、
センチメートルあたりのピクセルの測定値も受け入れることができます (例: min-resolution:118dpcm; Scan) はスキャンに一致します: プログレッシブ
1080i HD TV (i はインターレース スキャンを意味します) はスキャンに一致します:interlace
13.grid は、出力デバイスがネットワーク デバイスであるかビットマップ デバイスであるかを検出するために使用されます

1 ～ 11 には 1 つのクエリ範囲を作成するために min- と max- を含めることができますが、12-13 には


がありません記述:



1. リンクの media 属性で CSS を読み込んで変更するかどうかを決定します



例: クエリを上下逆に変更し、マージするロジック ||

、または

2、CSS ファイル外部チェーン CSS ファイル @import url ("pHONE .CSS") Screen and (max-width: 360px); /* ディスプレイの最大幅が 360px 未満の場合に読み込まれる */

3. 直接書き込み:
@media screen and (max-width:980px) ) {
body{
background:#f0f;
font -size:12px;
}
}