画面幅に合わせてフォントサイズを可変させつつ、最小サイズと最大サイズを設定する 🍣

CSS

font-size: 100vw / 1200 * 36;
  
@media (max-width: 750px) {
  font-size: 750px / 1200 * 36;
}
  
@media (min-width: 1601px) {
  font-size: 1600px / 1200 * 36;
}

こんな感じで設定できます。
上記の設定だと、

• 画面幅1200pxの際にフォントサイズ36px
• 画面幅750px以下の際に22.5px
• 画面幅1601px以上の際に48px

となります。

DEMO

解説

vw

vwはviewportの幅に対して1%という単位です。
つまり100vwでviewportの幅になります。

developer.mozilla.org

なので、

font-size: 100vw / 1200 * 36;

と書けば、viewportの横幅が1200pxの際に36pxで表示されるわけです。
結果としてブラウザの幅によってフォントサイズを可変にすることができます。

そして、このテクニックはフォントサイズだけではなく、あらゆる要素に使えます。