CSS3: メディア クエリ_html/css_WEB-ITnose

メディア クエリは CSS3 の最も革新的な機能の 1 つであり、これにより当社の Web サイトをさまざまなデバイスに適応させることができます。具体的には、開発者はメディア クエリを使用してデバイス環境を識別し、さまざまなデバイス環境に応じてさまざまな CSS ルールを適用できるため、さまざまなデバイスでさまざまなレイアウトやスキンを使用できます。

構文

メディア クエリを適用するには 3 つの方法があります:

1. CSS ファイルを導入するときにメディア属性を使用します

<link href="file.css" rel="stylesheet" media="logic media and (expression)">

2. CSS ファイルで @import ディレクティブを使用します

@import url('file.css') logic media and (expression);

3. CSS 内 ファイル内で @media ディレクティブを使用します

@media logic media and (expression) { rules }

デバイス環境がロジック メディアと (式) の記述を満たした場合、対応する CSS が有効または適用されます。最初のケースでは file.css 全体が有効になり、2 番目のケースでは file.css 全体が有効になり、3 番目のケースでは中括弧内のすべての CSS が有効になります。

ロジック 値は、だけではありえません。

media はメディアの種類を表します。最も一般的に使用されるのは screen と print で、それぞれ画面環境と印刷環境を表します。デフォルトは all です。

は、高さ、幅などのデバイス特性の判断です。これについては、以下で詳しく説明します。

/* 在打印环境下，print.css生效 */<link href="print.css" rel="stylesheet" media="print">/* notprint.css作用于非打印环境下 */@import url('notprint.css') not print;/* 仅当在屏幕环境下并且窗口大小至少为1000px时，相应的css生效 */@media only screen and (min-width: 1000px) {    #example {        background-color: red;    }}/* 多条媒体查询用,分隔 */@media screen, print {    #example {        background-color: red;    }}

メディア機能

上記の式は、デバイスの特性を記述するために使用されるメディア機能式です。構文は @media (feature: value) { rules } です。 feature は機能名を表し、value はその値を表します。上の例を参照してください。

以下は、Media Queries が提供するすべての機能を実用性の順に分類したものです。

幅と高さ

は、Web ページのレンダリング ウィンドウの幅と高さ、つまりブラウザの表示領域のサイズを表します。

@media (width: 600px) { rules }

特性値は最大プレフィックスと最小プレフィックスの両方をサポートします。例:

@media (max-width: 480px) { rules }@media (min-width: 640px) { rules }

ピクセル比

ピクセル比または解像度、ここでのピクセル比は実際にはデバイスピクセル比 (DPR)、つまりデバイスを意味します物理ピクセル 論理ピクセルに対するポイントの比率。

たとえば、iPhone 5S の物理解像度は 640*1136 ですが、CSS 解像度は 320*568 です。換言すれば、その論理解像度は３２０×５６８であり、そのＤＰＲは２であり、すなわち、水平２物理ピクセルと垂直２物理ピクセルが１論理ピクセルを構成する。

図 1: DPR 1 (左)、DPR 2 (中央)、DPR 3 (右)

ほとんどの場合、開発者はデバイスの物理解像度、テキスト、およびベクター画像は良好なパフォーマンスを発揮しますが、非ベクター画像は高解像度の画面で深刻な歪みが発生します。 DPR が 2 のデバイス上の通常の画像は、画像を 2 倍に拡大したことに相当し、ユーザーは明らかにぼやけているように感じます。

現時点では、この構文を使用して、デバイス @media media と (resolution: value) { rules } の DPR を決定できます。

値の単位は、1 インチあたりのドット数 (DPI)、1 センチメートルあたりのドット数 (DPCM)、またはより直観的にはピクセルあたりのドット数 (DPPX) です。

@media (resolution: 1.5dppx) { rules }@media (max-resolution: number) { rules }@media (min-resolution: number) { rules }

したがって、DPR=2 の場合、画像の 2 倍の解像度を使用できます:

1 div { background-image: url('image.png'); }2 @media (resolution: 2dppx) {3     div { background-image: url('image-2x.png'); }4 }

Chrome、Firefox、IE 10 以降は、resolutionMedia 機能をサポートしますが、IE DPPX単位はサポートされていません。 IE と互換性を持たせるために、DPI を単位として使用できます (標準画面 DPI は 96)。例:

@media (resolution: 1.5dppx), (resolution: 144dpi) { rules }

さらに、Safari は解像度をサポートしていないため、代わりに -webkit-device-pixel-ratio を使用してください。 :

@media (resolution: 1.5dppx), (resolution: 144dpi), (-webkit-device-pixel-ratio: 2) { rules }

デバイスの幅と高さ

これら 2 つのプロパティはデバイス画面の幅と高さを検出しますが、実用的な価値はほとんどありません。ここでの幅と高さは、デバイスの物理ピクセルを指します。

@media (device-width: number) { rules }@media (device-height: number) { rules }@media (max-device-width: number) { rules }@media (max-device-height: number) { rules }@media (min-device-width: number) { rules }@media (min-device-height: number) { rules }

方向

デバイスの方向: 横向きまたは縦向き。幅 > 高さの場合、デバイスは横向きモードになります。それ以外の場合、デバイスは縦向きモードになります。この機能はハンドヘルド デバイスでより便利です。

@media (orientation: landscape) { rules }@media (orientation: portrait) { rules }

アスペクト比

アスペクト比 (16/9、16/10 など) aspect-ratio はブラウザのアスペクト比を表し、device-aspect-ratio はデバイスのアスペクト比を表します。

@media (aspect-ratio: horizontal/vertical) { rules }@media (device-aspect-ratio: horizontal/vertical) { rules }@media (min-aspect-ratio: horizontal/vertical) { rules }@media (min-device-aspect-ratio: horizontal/vertical) { rules }@media (max-aspect-ratio: horizontal/vertical) { rules }@media (max-device-aspect-ratio: horizontal/vertical) { rules }

@media (min-device-aspect-ratio: 16/9) {...}

iPhone は横向きモードでも縦向きモードでも同じアスペクト比を返しますが、他のデバイスは向きが異なると異なるアスペクト比を返すことに注意してください。