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

0 vote281 views1 answer
How to disable phone number linking in Mobile Safari
CSS
0 vote287 views1 answer
Hide yunohost button on apps
CSS
1 vote274 views2 answers
Only ie css
CSS
0 vote318 views2 answers
Weer
CSS
0 vote287 views1 answer
Css locks
CSS
1 vote278 views1 answer
::-ms-clear
CSS
0 vote290 views1 answer
How to link to class in CSS
CSS
41 votes316 views2 answers
Add ... to long text css
CSS
37 votes251 views4 answers
Select even child css
CSS
19 votes281 views2 answers
How to customize placeholder css
CSS