デバイスのビューエリアや解像度でスタイルを切り替える方法

デバイスやビューのエリアサイズでスタイルを切り替える

サイズの指定には以下の4種類が用意されています。

指定時はこれらを組み合わせてエリアサイズごとのスタイルの指定をします。

media screen and (min-width : 768px){
  /*ビューエリアの横幅768pxまでのスタイル*/
}
@media screen and (min-width : 1024px) {
  /*ビューエリアの横幅1024pxまでのスタイル*/
}

ビューエリアとデバイスエリアの補足

ビューエリアはその時点のサイズなのに対し、デバイスエリアはデバイスのサイズです。 スマートフォンを横向きにしてサイズが横長になった場合、ビューエリアのスタイルは切り替わりますがデバイスエリアのスタイルは切り替わらない違いがあります。

デバイスの解像度でスタイルを切り替える

webkitでdevice-pixel-ratioを、将来的な記述としてresolutionを指定します。
デバイスピクセル値は{1,1.5,2,3}などが想定されます。

media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */
  /*高解像時のスタイル*/
}

横向きと縦向きでスタイルを切り替える

リキッドレイアウトであれば縦横を切り替えても基本的に問題ありません。
そうでない場合や、あえて縦・横で違うコンテンツにする場合、orientationプロパティを使います。

*横向きの場合*/
@media screen and (orientation: portrait) {
  /*横向きのスタイル*/
}
 
/*縦向きの場合*/
@media screen and (orientation: landscape) {
  /*縦向きのスタイル*/
}