@media (max-width:)は時代遅れ – 最新のレスポンシブコーディングClampについて –

レスポンシブ、正直めんどくさくないですか?

clamp()を使おう！

clampのイメージ

メリット・デメリット

メリット

デメリット

デメリットに対する対処法

① 推奨値の指定方法が分かりづらい → 「vw」を「px」感覚で使えるFunctionを登録しよう

@function vw($px, $viewport: 1440) { $i: math.div($px, $viewport); @return ($i * 100vw); }

推奨値が大きいと最小値までいかない問題に対して → SPに切り替わった瞬間従来のように最小値に上書きしてしまう

@mixin sp { @media (max-width: 767px) { @content; } } .example{ margin-top: clamp(50px, vw(2000), 2000px) @include sp{ margin-top:50px; } }

更に時短する方法

@function c($pc: 0, $sp: 0) { @return clamp(#{$sp}px, #{vw($pc)}, #{$pc}px); } .example{ margin-top: c(2000, 50) @include sp{ margin-top:50px; } }

今回の登録するMixin、Functionと完成形をおさらい

1. vwをpx感覚で使えるFunction

@function vw($px, $viewport: 1440) { $i: math.div($px, $viewport); @return ($i * 100vw); }

2. @media (max-width: 767px)を省略できるmixin

@mixin sp { @media (max-width: 767px) { @content; } }

3. clampの推奨値を省略できるFunction

@function c($pc: 0, $sp: 0) { @return clamp(#{$sp}px, #{vw($pc)}, #{$pc}px); }

4. 完成形

.example{ margin-top: c(2000, 50) @include sp{ margin-top:50px; } }