【2日目】Clamp関数をホームページ制作に使った件

clamp関数は、編集者草案の段階のCSSです
◎編集者草案とは？
clamp関数のMDNから「CSS Values and Units Module Level 4」を自分なりに確認したところ、
以下翻訳にかけて抜粋

編集者の下書きの公開コピー
いつでも変更される可能性があります。

らしいので使用するのは注意が必要そうです。

今回はあくまで社内向けサイト制作だったのでclampを使ってみました。

使い方

font-size、width、margin/paddingなどで使うことができます。

h1 {font-size:clamp(14px,0.83vw,20px)}
デザインは1920px、h1は16pxで作成されているケース：
1つめの数値が最小値、2つめが基準値、3つめが最大値です。
基本→画面幅に対して0.83vwの大きさで表示する。
画面幅を縮小した時→14pxを下回る場合は14pxで固定。
画面幅を広げた時→その逆で20pxで固定する仕組みです。

たった一行で最大値/最小値を設定できるのは便利ですよね！

対応ブラウザ

下記はCalmp関数が、実際に動くことを確認しています。
Mac(Safari)
Windows(firefox/Edge(chromium)/Chrome)※全て最新
※2020年7月段階の最新version

Can I use...
https://caniuse.com/#feat=css-math-functions

似た関数 max関数とmin関数

結論からいうとSCSSでこの2つの関数は使えませんでした。。
is not a number for max というエラーが出てコンパイルができないのです。
なので私の場合は、clamp関数で最大値もしくは最小値を適当に設定して対応しました。

また、もちろんIEではclamp関数は動かないので
使用する場合は、

    padding-left: 6.25%;
    padding-right: 6.25%;
    padding-left: clamp(80px, 6.25vw, 120px);
    padding-right: clamp(80px, 6.25vw, 120px);

というようにフォールバックしておけばIEでは6.25%を読み込んでくれます。

まだまだ調べきれていないことがありそうですが
ひとまずこんなのがあるんだなとだけ覚えとこうと思います。