メディアクエリの書き方(スマートフォン対応、レスポンシブデザイン)

スマホ・タブレットの見栄えを考えると、デバイスにはそれぞれの画面サイズがあるため、Webサイトによっては一定のwidth値によって適用するCSSを変更したい場合があります。
CSSには@media以降に指定のwidth値を与え、デバイスの幅(device width)に応じたCSSの適用を行う機能があります。

現在の主流は、モバイルファーストと呼ばれるwidthが狭いときの見栄えを先に記述し、後に@mediaを用いてwidthが広いときの見栄えを記述する方法です。
一方で、デスクトップファーストと呼ばれるwidthが広いときの見栄えを先に記述し、後に@mediaを用いてwdithが狭いときの見栄えを記述する方法もあります。
いずれにせよ、width値がどの範囲にあるときにどのCSSを適用するのかを常に意識する必要があります。

理解の鍵はmax-widthとmin-widthの指定方法です。

min-width, max-widthとは

min-width:○○pxからcssを適用(主にモバイルファーストで使用)
max-width:○○pxまでcssを適用(主にデスクトップファーストで使用)

以下は、デスクトップファーストとして書かれたCSSで、画面幅が大きい順に 赤 > 青 > 緑 と背景色を変えるものですが、max,minの指定を誤ったために意図しない表示となっています。

See the Pen メディアクエリ失敗 by mine333 (@kenic_ono) on CodePen.0

新しいデバイスが次々に登場している時期ですので、デバイス幅やデバイスピクセル比を考えるとなかなか「決定版」といえるメディアクエリを製作するのにも工夫が必要かもしれません。