シンプルなレスポンシブデザインを実現するためのメディアクエリの考え方

スタイルはシンプルなものから宣言していく方が無駄がない。

レスポンシブデザインにおいては、小さい画面のほうがより簡素な画面構成であることが多い。そのため、小さい画面から順に大きい画面まで設計したほうが理に適っている。例えば以下のようなコードになる。

$breakpoint-small: 480px;
$breakpoint-medium: 960px;

.component {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid lightgray;

  @media (min-width: $breakpoint-small) {
    margin-bottom: 3rem;
  }

  @media (min-width: $breakpoint-medium) {
    font-size: larger;
  }
}

このような実装にすることで、小さい画面のスタイルは引き継ぎつつ、上書きする必要があるプロパティだけ宣言すればよくなる。複数のクエリを組み合わせる((min-width: 576px) and (max-width: 767px)など)よりも、適用されるスタイルが把握しやすくて簡単になる。

f:id:yuheiy:20170605185018p:plain

この場合、小さい画面のほうがスタイルが複雑な要素(ハンバーガーメニューなど)があっても、メディアクエリの書き方は一貫させたほうが良い。むしろあまりにそういったケースが多いのであれば、デザインが間違っていることを疑うべきだ。

カンプを作るときや、コーダーとのやりとりをするときにも、この考え方を知っている前提だとうまくいく。幅480px未満ではこれ、幅480px以上で幅960px未満のときはこうなる、という風にできると円滑になる。