Edited at

Media Queriesの指定について

More than 5 years have passed since last update.


Media Queriesの指定方法


Media Queriesを使ってcssを読み込む方法は3つ


  1. HTMLのlinkタグのmedia属性に記述

  2. css内に@media記述

  3. css内に@import記述


代表的なmedia type


html

@media all すべて

@media screen コンピュータ画面
@media print プリンタ
@media tv テレビ

1.HTMLのlinkタグのmedia属性に記述


html

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >


2.css内に@media記述


css

@media all and (min-width: 480px) { ... }


3.css内に@import記述


css

@media all and (min-width: 480px) { ... }



基本の書き方

480ピクセル以上のすべてのメディア・タイプ


css

@media (min-width:480px) { ... }


または


css

@media screen and (min-width:480px){ ... }


500ピクセル、かつ最大幅が 800ピクセルの場合


css

@media screen and (min-width: 500px) and (max-width: 800px) { ... }


allとandは省略できる


css

@media (min-width:480px) { ... }



css

@media all (min-width:480px) { ... }



and区切りで「すべての条件を満たすメディア」


css

@media screen and (min-height: 600px) and (min-width: 300px)



カンマ区切りで「どれかの条件を満たす」(orのような動作)


css

@media screen and (min-height: 600px) and (min-width: 300px), screen and (min-width: 400px), print



振り分けに使う属性

Max Width:

ビューエリアの最大幅。このサイズより小さい場合に適用
Min Width:
ビューエリアの最小幅。このサイズより大きい場合に適用
Max Device Width:
デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width:
デバイスサイズの最小幅。このサイズより大きい場合に適用
Orientation:
縦長か横長かで振り分ける
Device Pixel Ratio:
デバイスの解像度で振り分ける。


縦長か横長かで振り分けるにはOrientation

portrait:縦長の場合

landscape:横長の場合


css

@media screen and (orientation: portrait) {

}
@media screen and (orientation: landscape) {
}


device Pixel Ratio(デバイス・ピクセル比)とresolutionについて


device Pixel Ratioとは

Retinaや高解像度に対応させるプロパティ。デバイス・ピクセルと、CSSピクセルの比率。


css

@media (-webkit-min-device-pixel-ratio: 2){

...
}

Safari CSS Reference: Supported CSS Rules


数値は、「2」がRetinaディスプレイ、「1」が標準ディスプレイを示す。


android は 0.7~3までバラバラに混在している。Win8はユーザーが設定できる仕様。


※注意点

device-pixel-ratioは、もともとアップルがRetinaディスプレイを開発した際に、WebKitを独自に拡張したものであってW3Cの標準規格ではないが、後にAndroidやChrome、Firefox、Operaも対応した。

現在は、実装状況がまちまちな上に、今後も高解像度な端末が発売される事が考えられるので、デバイス・ピクセル比だけをキーにスマホ判別させるのは現状では難しい。jsまたはサーバサイドに頼った方が無難。


resolutionとは

W3Cで定められた標準規格。値の指定は3種類。


  1. dpi (1インチ当たりのドット数)

  2. dpcm (1センチメートル当たりのドット数)

  3. dppx (ピクセル当たりのドット数)

現状、Webkit系は、resolutionをサポートしていない。device-pixel-ratioを使用しなければダメ。

そのため、dppxを使用した方がdevice-pixel-ratioの仕様と併せられるので、指定がラク。

https://developer.mozilla.org/ja/docs/Web/CSS/resolution

dppxなら、device-pixel-ratioと数値を合わせられる。

@media

(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx){
・・・
}


記述の順番について

PCファーストで書く場合

PC用のスタイルを定義→スマホ用に上書きしていく


css

@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}

モバイルファーストで書く場合

スマホ用→PC用にしていく。但しIE8以下で問題の起きる可能性が高い。


css

@media screen and (max-width: 480px) {

}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 1200px) {
}


Viewportの指定

Media Queriesを正しく機能させるにはViewportの指定が必要。スマートフォン向けの機能。

最初に読み込まれたときの画面サイズや、拡大縮小の可否指定できる


html

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />


→Viewportについて

デフォルトは980px


IE対応

IE8以下はcss-mediaqueries.js使えばいい

設置の仕方

<head>~</head> 間に


html

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

css-mediaqueries.jsの注意点

1. media typeを省略しない(@media screen andまで記述する)

2. @import使うと効かない

3. link要素のmedia属性も効かない

4. @media記述より前に@charset記述を書くと効かない場合がある(@media記述のみが記載されたcssファイルの冒頭で@charset指定を行うと、css3-mediaqueries.jsが無効になってしまう)