CSSの便利な関数 min, max, clamp（クランプ） 解説！

[@nasumi9595]

今までのレスポンシブ対応がだいぶ楽になりそうですね。
早速使ってみます。

[@ゆわわん]

今回も勉強になりました♪
声が癒しなので心地よいです(^^)
ありがとうございます♪

[@webFrontEndChannel]

良かったです！声を褒められるのは嬉しいです♪

[@nasumi9595]

いつも色々質問してすみません。
例えばPC版のデザインカンプの見出しのサイズが40px、SP版のデザインカンプの見出しのサイズが20px相当だった場合は、以下のような考え方で良いでしょうか。
h2 {
font-size: clamp(20px, 4vw, 40px);
}
推奨値が2vwだと40pxになるまでかなり画面の幅が必要になったため(13インチくらいのPCだと40pxに届かない？)画面幅の4%(最大値が40pxなので)のフォントサイズに設定するべきかと思い記述しました。

[@webFrontEndChannel]

そうですね、特に正解はないので、どのように変化させたいかによって変える感じになると思います。
それから、実際に調べてみていただけると良いと思いますが、一番使われているPCの画面幅は1920pxなので、それを基準に考えると良いかもしれません。
あと、そもそも変化させる必要があるのかどうかも考える必要があります💦

[@nasumi9595]

@@webFrontEndChannel ありがとうございます。
たしかにそもそも可変させる必要があるのかということは考える必要がありそうですね。
いくつか細かい解説をしているブログや推奨値の計算シュミレーターツールあったので見てみます！

[@KentaroxKondo]

有益な動画をありがとうございます！
コードの記述中に、〜 is expectedなどと表示してくれるのは、何の拡張機能ですか？

[@webFrontEndChannel]

いつもありがとうございます！
Error Lensというプラグインです。