CSSメディアクエリ・・・シミュレーターについても

レスポンシブwebデザイン対応のwebページを作るときに便利なのが、CSSメディアクエリ（Media Queries）です。
ディスプレイ（ブラウザ）サイズによって適用するcssをフィルタリングします。
CSS3の便利な機能です。

使い方

一例としては

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

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

このように画面サイズによって外部cssファイルを切り分けたり、

@media screen and (min-width: 0px) and (max-device-width: 320px) {
...
}
@media screen and (min-width: 321px) and (max-device-width: 920px) {
...
}
@media screen and (min-width: 911px)  {
...
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

このようにスタイルごとに、適用させる画面サイズを指定したりできます。
詳しい使い方は、以下のリンクリストを参照したり、google先生に訊いてください。

なお、CSS3なのでIE8以下では使えません。
対応させたいときは、css3-mediaqueries.jsをheadタグ内などに読み込ませておくとよいでしょう。
ただし、その際条件付きコメントは使わないようにしてください。条件付きコメントは最新のIEではサポートされていません。
jsのModernizrなどで判定してください。

画面サイズの切り分け方

次から次と新しいスマートデバイスが発売されるので、正直、あまり細かく画面サイズを切り分けても管理が大変になるだけです。
基本320pxを最小幅とみなしていますが、ガラホとかもあるので、きりがない感じです。
少なく済むなら、少なくしましょう。

見落としがちなのが、縦置き（または横置き）固定にするのか、縦置き横置き切替え対応するのかという点です。

戻る

Top