レスポンシブデザインに欠かせないメディアクエリの記述まとめ

メディアクエリのまとめです。

メディアクエリ記述まとめ

以下はすべてcssに記述します。

最小, 最大

@media screen and (min-width: 480px) {
    /* 幅480px以上のスタイル*/
}

@media screen and (max-width: 800px) {
    /* 幅800pxまでのスタイル */
}

OOpx〜OOpxまで

@media screen and (min-width: 480px) and (max-width: 800px) {
    /* 幅480px〜800pxまでのスタイルを記述 */
}

モバイルデバイスの向き

こんなのもあります。

@media all and (orientation: landscape) {
  /*ランドスケープモード（横向き）のスタイル */

}

@media all and (orientation: portrait) {
/*ポートレートモード（縦向き）のスタイル */
}

読み込むcssを切り分けたい場合

css内部で分けるのではなく、読み込むファイル自体を分ける場合は下記のようにします。

<link rel="stylesheet" href="style.css" media="all and (min-width: 480px) and (max-width: 800px)"/>

実際組むとなると

まず現在の一般的なデバイスの大きさは以下

デバイス 幅 高さ device-width
iPhone5 640px 1136px 320px
iPad 4 1536px 2048px 768px
Nexus7 800px 1280px 600px

実際の解像度は高いのですが、device-widthに合わせて作れば（たぶん）OK。

サイズについてまとまってるサイトがありましたので、こちらも参考にしてください。
Screensiz.es

大体こんな感じの指定で十分だろうか

@media screen and (max-width: 599px) {
    /* 幅600px未満
       スマホの横持ちくらいまで対応 */
}

@media screen and (min-width: 600px) and (max-width: 799px) {
    /* 幅480px〜800px
       タブレット端末と小さなラップトップ用 */
}

@media screen and (min-width: 800px) and (max-width: 1099px) {
    /* 幅800px〜1100px
       デスクトップマシンを使っている人用 */
}

@media screen and (min-width: 1100px) {
    /* 幅1100px以上
       デスクトップマシンを使っててブラウザを贅沢に広げる人用 */
}

実際に上記を使ってコーディングするのはこれからなので、最適ではないかもしれません。

参考サイト