Media Queriesの指定方法
Media Queriesを使ってcssを読み込む方法は3つ
代表的なmedia type
@media all すべて
@media screen コンピュータ画面
@media print プリンタ
@media tv テレビ
1.HTMLのlinkタグのmedia属性に記述
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
2.css内に@media記述
@media all and (min-width: 480px) { ... }
3.css内に@import記述
@media all and (min-width: 480px) { ... }
基本の書き方
480ピクセル以上のすべてのメディア・タイプ
@media (min-width:480px) { ... }
または
@media screen and (min-width:480px){ ... }
500ピクセル、かつ最大幅が 800ピクセルの場合
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
allとandは省略できる
@media (min-width:480px) { ... }
@media all (min-width:480px) { ... }
and区切りで「すべての条件を満たすメディア」
@media screen and (min-height: 600px) and (min-width: 300px)
カンマ区切りで「どれかの条件を満たす」(orのような動作)
@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:横長の場合
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}
device Pixel Ratio(デバイス・ピクセル比)とresolutionについて
device Pixel Ratioとは
Retinaや高解像度に対応させるプロパティ。デバイス・ピクセルと、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種類。
- dpi (1インチ当たりのドット数)
- dpcm (1センチメートル当たりのドット数)
- 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用のスタイルを定義→スマホ用に上書きしていく
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
モバイルファーストで書く場合
スマホ用→PC用にしていく。但しIE8以下で問題の起きる可能性が高い。
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 1200px) {
}
Viewportの指定
Media Queriesを正しく機能させるにはViewportの指定が必要。スマートフォン向けの機能。
最初に読み込まれたときの画面サイズや、拡大縮小の可否指定できる
<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> 間に
<!--[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が無効になってしまう)