【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%を読み込んでくれます。
まだまだ調べきれていないことがありそうですが
ひとまずこんなのがあるんだなとだけ覚えとこうと思います。
Author And Source
この問題について(【2日目】Clamp関数をホームページ制作に使った件), 我々は、より多くの情報をここで見つけました https://qiita.com/aya_tk/items/0d26c891aafa393d66da著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .