CSS3 Media Queries(メディアクエリ)書くときに必ず開くサイト

レスポンシブルサイトを作る時に必要なCSS3のMedia Queries(メディアクエリ)について、よそ様が沢山書いてくれているから細かくは書かないけど、Media Queriesを書くときに必ずみる(ってか詳細を忘れちゃってるのでこのサイト見ないとかけない)サイトがこのサイト。

デバイスに合わせてCSSを振り分ける「Media Queries」
http://dev.classmethod.jp/smartphone/device-media-queries/

とくにMedia Queriesが機能する条件を書くところが特に簡潔にまとめられていてよい。

引用

  • Max Width:
    • ビューエリアの最大幅。このサイズより小さい場合に適用
  • Min Width:
    • ビューエリアの最小幅。このサイズより大きい場合に適用
  • Max Device Width:
    • デバイスサイズの最大幅。このサイズより小さい場合に適用
  • Min Device Width:
    • デバイスサイズの最小幅。このサイズより大きい場合に適用
  • Device Pixel Ratio:
    • デバイスの解像度(webkit)
  • Orientation:
    • デバイスの向き