CSS
メディアクエリ
サーチ…
構文
- @media [not | only] mediatypeと（メディア機能）{/ *適用するCSSルール* /}
パラメーター
| パラメータ | 詳細 |
|---|---|
mediatype | （オプション）これはメディアのタイプです。 screenのallの範囲にあるものである可能性がall screen 。 |
not | （オプション）この特定のメディアタイプにCSSを適用せず、他のすべてに適用します。 |
media feature | CSSのユースケースを識別するロジック。以下に説明するオプション。 |
| メディア機能 | 詳細 |
aspect-ratio | 出力デバイスのターゲット表示領域のアスペクト比について説明します。 |
color | 出力デバイスの色成分あたりのビット数を示します。デバイスがカラーデバイスでない場合、この値はゼロです。 |
color-index | 出力デバイスのカラールックアップテーブル内のエントリ数を示します。 |
grid | 出力デバイスがグリッドデバイスであるかビットマップデバイスであるかを決定します。 |
height | 高さメディアフィーチャーは、出力デバイスのレンダリングサーフェスの高さを表します。 |
max-width | CSSは、指定した幅よりも広いスクリーン幅では適用されません。 |
min-width | CSSは、指定された幅より狭い画面幅には適用されません。 |
max-height | CSSは指定された高さよりも画面の高さには適用されません。 |
min-height | CSSは、指定されたよりも短い画面の高さには適用されません。 |
monochrome | モノクロ（グレースケール）デバイス上のピクセルあたりのビット数を示します。 |
orientation | デバイスが指定された方向を使用している場合のみ、CSSが表示されます。詳細は備考を参照してください。 |
resolution | 出力デバイスの解像度（ピクセル密度）を示します。 |
scan | テレビ出力デバイスのスキャン処理について説明します。 |
width | 幅のメディアフィーチャは、出力デバイスのレンダリングサーフェスの幅（ドキュメントウィンドウの幅、またはプリンタのページボックスの幅など）を表します。 |
| 推奨されない機能 | 詳細 |
device-aspect-ratio | DeprecatedされないCSSは、高さ/幅の比率が指定された比率と一致するデバイスでのみ表示されます。これはdeprecated機能であり、動作することは保証されていません。 |
max-device-width | Deprecatedれないmax-width同じですが、ブラウザの表示幅ではなく、物理的な画面幅を測定します。 |
min-device-width | Deprecated min-width同じですが、ブラウザの表示幅ではなく物理的な画面幅を測定します。 |
max-device-height | Deprecatedれないmax-height同じですが、ブラウザーの表示幅ではなく物理的な画面幅を測定します。 |
min-device-height | Deprecated min-height同じですが、ブラウザの表示幅ではなく物理的な画面幅を測定します。 |
備考
メディアクエリは、Chrome、Firefox、Opera、Internet Explorer 9以上の最新のブラウザでサポートされています。
orientationメディア機能はモバイルデバイスに限定されないことに注意することが重要です。ビューポートの幅と高さに基づいています（ウィンドウまたはデバイスではありません）。
風景モードは、ビューポートの幅がビューポートの高さよりも大きい場合です。
ポートレートモードは、ビューポートの高さがビューポートの幅よりも大きい場合です。
これは、通常、デスクトップモニタが風景モードであることを意味しますが、時にはポートレートである場合もあります。
ほとんどの場合、モバイルデバイスは、ピクセル密度によって異なる可能性のある実際のピクセルサイズではなく、解像度を報告します。実際のピクセルサイズを報告するように強制するには、 headタグの中に次のように追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
基本的な例
@media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
上記のメディアクエリは、2つの条件を指定します。
- ページは通常の画面（印刷されたページ、プロジェクタなどではない）で表示する必要があります。
- ユーザーの表示ポートの幅は720ピクセル以上でなければなりません。
これらの条件が満たされている場合、メディアクエリ内のスタイルがアクティブになり、ページの背景色は空色になります。
メディアクエリは動的に適用されます。ページの読み込みでメディアクエリで指定された条件が満たされた場合は、CSSが適用されますが、条件が満たされなくなった場合はすぐに無効になります。逆に、条件が最初に満たされない場合、指定された条件が満たされるまでCSSは適用されません。
この例では、最初にユーザーのビューポート幅が720ピクセルを超えていてもユーザーがブラウザの幅を縮小すると、ユーザーがビューポートのサイズを720ピクセル未満に変更すると背景色が空になります幅。
リンクタグで使用する
<link rel="stylesheet" media="min-width: 600px" href="example.css" />
このスタイルシートはまだダウンロードされていますが、画面幅が600ピクセルを超えるデバイスでのみ適用されます。
メディアタイプ
メディアクエリにはオプションのmediatypeパラメータがあります。このパラメータは@media宣言（ @media mediatype ）の直後に置かれます。たとえば、次のようになります。
@media print {
html {
background-color: white;
}
}
上記のCSSコードは、印刷時にDOM HTML要素に白の背景色を与えHTML 。
mediatypeパラメータはオプションでありnotかonly 、それぞれ、指定されたMEDIATYPE のみ指定されたメディアタイプを除くすべてにスタイルを適用する接頭辞を。たとえば、次のコード例は、 printを除くすべてのメディアタイプにスタイルを適用しprint 。
@media not print {
html {
background-color: green;
}
}
そして同じように、画面上にのみ表示するために、これを使うことができます：
@media only screen {
.fadeInEffects {
display: block;
}
}
mediatypeのリストは、次の表でよりよく理解できます。
| メディアタイプ | 説明 |
|---|---|
all | すべてのデバイスに適用 |
screen | デフォルトのコンピュータ |
print | 一般的にプリンタ。ウェブサイトの印刷版をスタイルするために使用されます |
handheld | PDA、携帯電話、小画面のハンドヘルド機器 |
projection | 投影された提示のために、例えばプロジェクタ |
aural | 音声システム |
braille | 点字触覚デバイス |
embossed | ページ付き点字プリンタ |
tv | テレビ型装置 |
tty | 固定ピッチ文字グリッドを備えたデバイス。ターミナル、ポータブル |
メディアクエリを使用して異なる画面サイズをターゲットにする
多くの場合、レスポンシブウェブデザインは、条件が満たされた場合にのみ実行されるCSSブロックであるメディアクエリを含みます。メディアクエリを使用して、Webサイトのモバイル版とデスクトップ版の異なるCSSスタイルを指定できるため、応答性の高いWebデザインに役立ちます。
@media only screen and (min-width: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
/* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
/* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
/* Styles in this block are only applied if the screen size is over 1024px wide. */
}
幅とビューポート
メディアクエリで「幅」を使用する場合、メタタグを正しく設定することが重要です。基本的なメタタグはこのように見え、 <head>タグの中に入れる必要があります。
<meta name="viewport" content="width=device-width,initial-scale=1">
なぜこれが重要なのですか？
MDNの定義に基づいて「幅」は
幅のメディアフィーチャは、出力デバイスのレンダリングサーフェスの幅（ドキュメントウィンドウの幅、またはプリンタのページボックスの幅など）を表します。
どういう意味ですか？
View-portはデバイス自体の幅です。解像度が1280 x 720の画面解像度であれば、ビューポートの幅は「1280ピクセル」になります。
多くの場合、多くのデバイスが異なるピクセル量を割り当てて1つのピクセルを表示します。たとえば、iPhone 6 Plusには1242 x 2208の解像度があります。実際のビューポート幅とビューポート高さは414 x 736です。つまり、1ピクセルを作成するために3ピクセルが使用されます。
しかし、 meta正しく設定しなかった場合は、元の解像度でウェブページを表示しようとします。その結果、縮小されたビュー（小さなテキストや画像）が表示されます。
網膜および非網膜画面のメディアクエリ
これはWebKitベースのブラウザでのみ機能しますが、これは役に立ちます：
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
背景情報
ディスプレイには2種類のピクセルがあります。 1つは論理ピクセルで、もう1つは物理ピクセルです。ほとんどの場合、物理ピクセルは、すべてのディスプレイデバイスで同じなので、常に同じままです。論理ピクセルは、より高品質のピクセルを表示するためのデバイスの解像度に基づいて変化する。デバイスピクセル比率は、物理ピクセルと論理ピクセルの比率です。たとえば、物理的な線形解像度が論理解像度の2倍であるため、MacBook Pro Retina、iPhone 4以上ではデバイスのピクセル比率は2です。
これがWebKitベースのブラウザでのみ機能する理由は、次の理由によるものです。
- ルールの前にベンダープレフィックス
-webkit-。 - これは、WebKitとBlink以外のエンジンでは実装されていません。
用語と構造
メディアクエリは 、 メディアタイプと呼ばれるデバイス/メディア（スクリーン、プリント、ハンドヘルドなど）のタイプに基づいてCSSルールを適用することを可能にし、デバイスの追加の側面は、カラーまたはビューポートディメンションの利用可能性などのメディア機能で説明されます 。
メディアクエリの一般的な構造
@media [...] {
/* One or more CSS rules to apply when the query is satisfied */
}
メディアタイプを含むメディアクエリ
@media print {
/* One or more CSS rules to apply when the query is satisfied */
}
メディアタイプとメディア機能を含むメディアクエリ
@media screen and (max-width: 600px) {
/* One or more CSS rules to apply when the query is satisfied */
}
メディアフィーチャ（および暗黙のメディアタイプ「すべて」）を含むメディアクエリ
@media (orientation: portrait) {
/* One or more CSS rules to apply when the query is satisfied */
}
メディアクエリとIE8
IE8以降では、 メディアクエリはまったくサポートされていません。
Javascriptベースの回避策
IE8のサポートを追加するには、いくつかのJSソリューションの1つを使用できます。たとえば、 レスポンスを追加して、IE8のメディアクエリサポートを追加するには、次のコードを使用します。
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueriesは同じことをする別のライブラリです。そのライブラリをHTMLに追加するコードは同じです：
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
代替
JSベースのソリューションが気に入らない場合は、IE <9のみのスタイルシートを追加することを検討してください。そのためには、次のHTMLをコードに追加する必要があります。
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
注意 ：
技術的にはもう1つの選択肢があります： CSSハックを使ってIE <9をターゲットにします。 IE <9スタイルシートと同じ効果がありますが、それには別のスタイルシートは必要ありません。しかし、私はこのオプションを推奨しません。なぜなら、それらが無効なCSSコードを生成するからです（それは、今日のCSSハックの使用が一般的ではない理由の1つです）。