いまさら Media Queries の書き方を覚える

[shikakun]

ブラウザ幅

@media screen and (max-width: 960px) {
  /* ブラウザ幅が 960px より小さいときに適用されるスタイル */
}

@media screen and (min-width: 960px) {
  /* ブラウザ幅が 960px より大きいときに適用されるスタイル */
}

デバイスのサイズ幅

@media screen and (max-device-width: 320px) {
  /* デバイスのサイズ幅が 320px より小さいときに適用されるスタイル */
}

@media screen and (min-device-width: 320px) {
  /* デバイスのサイズ幅が 320px より大きいときに適用されるスタイル */
}

デバイスの解像度

@media screen and (min-resolution: 2dppx) {
  /* デバイスの解像度が2倍のときに適用されるスタイル */
  /* むかしは @media screen and (-webkit-device-pixel-ratio: 2) とか書いてた */
}

デバイスの向き

@media screen and (orientation: portrait) {
   /* デバイスの向きが縦のときに適用されるスタイル */
}

@media screen and (orientation: landscape) {
   /* デバイスの向きが横のときに適用されるスタイル */
}

複数の条件を指定したいとき

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* デバイス幅が 768px より大きく 1024px より小さいときに適用されるスタイル */
}

CSS ファイル全体を指定したいとき

<!-- こういう風にも書ける -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css">

参考

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
• http://caniuse.com/#feat=css-mediaqueries
• http://dev.classmethod.jp/smartphone/device-media-queries/