Responsive text css

/* Uses vh and vm with calc */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

Responsive text css

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

Responsive text css

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Source: css-tricks.com

Similar codes

1 vote342 views1 answer
Box shador of one border css
CSS
-1 vote296 views1 answer
Minifoie css
CSS
30 votes376 views5 answers
Css vertical align
CSS
3 votes355 views2 answers
Image with background color css
CSS
2 votes341 views1 answer
Css disable dropdown on input
CSS
0 vote343 views1 answer
Images css in react native fir in container
CSS
1 vote365 views1 answer
Gatsby hide scroll bar
CSS
2 votes396 views4 answers
Sieve of eratosthenes
CSS
0 vote342 views1 answer
Storing and receiving FB
CSS
0 vote354 views1 answer
Changing bakcgound color like animation using tailwind
CSS