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

css3_html5

モバイルファーストとか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!
ですね

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

無理せず楽しく、手作りの小さな暮らしを大切に。
アラカンの「つづく生活」実践者です。
半自給自足を目指しながら、仕事・趣味・家のことをコツコツ楽しんでいます。
日々を淡々と綴ることで、人生を整えるヒントが見つかればと思っています。

目次