Media Queriesの指定について

##Media Queriesの指定方法

####Media Queriesを使ってcssを読み込む方法は3つ
1. HTMLのlinkタグのmedia属性に記述
2. css内に@media記述
3. css内に@import記述



####代表的なmedia type

```lang:html
@media all　すべて
@media screen	コンピュータ画面
@media print	プリンタ
@media tv	テレビ
```


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

```lang: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記述

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

3.css内に@import記述

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



##基本の書き方

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

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

または

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

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

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

**allとandは省略できる**

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

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


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

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

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

```lang: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:横長の場合

```lang:css
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}
```


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

####device Pixel Ratioとは

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

```lang:css
@media (-webkit-min-device-pixel-ratio: 2){
    ...
}
```

[Safari CSS Reference: Supported CSS Rules](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html)

>数値は、「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用のスタイルを定義→スマホ用に上書きしていく

```lang:css
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
```

**モバイルファーストで書く場合**
スマホ用→PC用にしていく。但しIE8以下で問題の起きる可能性が高い。

```lang:css
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 1200px) {
}
```






##Viewportの指定

Media Queriesを正しく機能させるにはViewportの指定が必要。スマートフォン向けの機能。
最初に読み込まれたときの画面サイズや、拡大縮小の可否指定できる

```lang: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>` 間に

```lang: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`が無効になってしまう)