CSSのmin、max、clampを学ぶ

CSSのmin、max、clampを学ぶ 

HTML,CSS

この設定は width:min(400px, 70vw); minは小さい値が採用される。画面を広げた場合では400px。

画面を狭めると70vw(画面の70%)が適用される、画面をいっぱいに広げたら400pxが適用される。minは最大値を決める(400px以上大きくならない値を決める)
この設定は width:max(400px, 50vw); maxは大きい値が採用される。画面を広げた場合では50vwが採用。

画面を狭めるとが400pxが適用される、画面をいっぱいに広げたら50vw(画面の50%)が適用される。maxは最小値を決める(400px以上小さくならない値を決める)
この設定は width:clamp(400px, 50vw ,600px); clampは最小値、推奨値、最大値を設定。この場合、最小値、最大値を超えない範囲で推奨値が適用される。

どんなに画面を狭めても400px以下にならない。どんなに画面をいっぱいに広げても600px以上にならない。
この設定は font-size:clamp(8px, 3vw ,26px); clampは最小値、推奨値、最大値を設定。この場合、最小値、最大値を超えない範囲で推奨値が適用される。

どんなに画面を狭めても8px以下にならない。どんなに画面をいっぱいに広げても26px以上にならない。

今回はしまぶーさんのこちらの動画から学ばせてもらいました。

レベルアップにプロからの学びを。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

  

就職・転職支援