レスポンシブデザインのブレイクポイントのminとかmaxがわかりにくいのでまとめておく

モバイルファーストとかPCファーストとか書く時に、ブレークポイントを用意しますが、それがわかりにくいので備忘録としてまとめておきます。

まず、ブレークポイントを用意。

最近だとスマホタブレットのサイズがいろいろあって細分化されてきていますが、例として以下の設定とします。

スマホ（縦）：480px以上

スマホ（横）：600px以上

タブレット：768px以上

パソコン：980px以上

これをモバイルファーストでscssで書くと、

@import "breakpoints/base";

@media (min-width: 480px) {
  @import "breakpoints/480up";
}

@media (min-width: 600px) {
  @import "breakpoints/600up";
}

@media (min-width: 960px) {
  @import "breakpoints/960up";
}

@media (min-width: 1280px) {
  @import "breakpoints/1280up";
}

このような書き方ができます。

このとき、breeakpoint/baseにスマホ用の基本的なデザインを記述し、
最初のブレークポイントmin-width: 480px（480px以上）のところに、
480px以上599px以下のデザイン設定を書きます。

以下同様にブレークポイント特有のデザインを記述していきます。

逆にPCファーストの設定だと

@import "breakpoints/base";

@media (max-width: 1280px) {
  @import "breakpoints/1280up";
}

@media (max-width: 960px) {
  @import "breakpoints/960up";
}

@media (max-width: 600px) {
  @import "breakpoints/600up";
}

@media (max-width: 480px) {
  @import "breakpoints/480up";
}

このように逆に書いていきます。

baseにPCで表示する基本的なデザインを書いて、最初のmax-width: 1280px（1280px以下）のブレークポイントで、961px以上1280px以下のデザインを書きます。

最初、minとmaxのイメージがつきにくかったのですが、最大値を書くとそれ以下で、最小値を書くとそれ以上という意味だということがわかり少しずつ慣れてきました。

慣れないうちは基本のscss設定の各プロパティの下に@mediaを書いていたのですが、こうするとスッキリしますね。

Practice makes perfect!
ですね

SNSでもご購読できます。

最近の投稿