【2018年版】media queryにおけるBreakPointの設定をmixinにする

【2018年版】media queryにおけるBreakPointの設定をmixinにする

2016年にあらかじめブレイクポイントごとのmixinがあると便利なはず!と思い、Breakpointに関するmixinを作りました。が、あれから2年たってみて、このbreakpointの設定はこのままでいいのだろうかと疑問に思うようになりました。

Google ChromeのDevToolを参考にBreakPointの値を決めることとします。

上の図のようにDevToolではサイズが決まっていました。

このことから、768px未満をスマホサイズ、1024px未満をタブレットサイズ、それ以上の大きさはパソコンサイズとします。そうすると、mixinは以下のようになります。

以前に作成したときよりもだいぶスッキリしました。タブレットをなしにして、768pxだけをBreakpointに設定してもいいかもです。ボクとしては、タブレットサイズで見ている人にも対応しておいたほうが、ユーザーフレンドリーかなと思います。(このブログをなんとかしろよという声が聞こえてきそうですが…💧)

26 views/total