【css】font-sizeをcalc+vwで指定する方法

ソースをみていると「font-size: calc(56px + 14*(100vw – 1024px)/376);」みたいなカオスに出くわすことがある

当然そんなものはしらない

しかし、しらないで終わらせてはフロントエンドエンジニアにはなれない

ということで調べた

完全に理解した

結論:画面幅が320のときは15pxで1000pxのときは50pxみたいなことをする時に使うらしい。すると画面幅に合わせて文字が拡大縮小するってわけだ

なんでcalc?vwでええやんってなるよね。僕もそう思う。メディアクエリでいちいち分岐させるのダルいときや、文字が小さくなりすぎるときとかに使えそうだね。

https://web-design-textbook.com/recipe/text-responsive.html
https://web-dev.tech/front-end/css/responsive-font-size-calc-vw/

この2つ、計算式は違うけどやっていることは同じこと

2つ目のほうがわかりやすい

コメント投稿フォーム

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA