Bigger fonts on smaller screens without @media queries or javascript?

user_5875416 0
Viewed 3077

Is there an alternative for @media queries to accomplish font-size inversely proportional to the screen size? (e.g.: opposite effect of 2vw, where the font gets smaller on small screens);

My first try was divide a value by a viewport width increment, but font-size: calc(10vw / 2); works while font-size: calc(100 / 2vw); unfortunately doesn't works.

codepen of my first try

calc fonts css
6 Answers

You can achieve this by using css clamp

Here is an awesome github project that can help you: https://clamp.font-size.app/

You'll need to switch the values for max & min to make it work, see example:

body {
  font-size: clamp(1rem, 5.1241rem + -5.6206vw, 4rem);
}
<p>I scale at smaller viewport widths!</p>

user_163614140
Related