More than 5 years have passed since last update.

Media Queriesの指定について

Last updated at 2014-09-16Posted at 2014-09-10

##Media Queriesの指定方法

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

HTMLのlinkタグのmedia属性に記述
css内に@media記述
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種類。

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

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の注意点

media typeを省略しない(@media screen andまで記述する)
@import使うと効かない
link要素のmedia属性も効かない
@media記述より前に@charset記述を書くと効かない場合がある(@media記述のみが記載されたcssファイルの冒頭で@charset指定を行うと、css3-mediaqueries.jsが無効になってしまう)

253

251

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up