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 vote183 views1 answer
Convert ipynb to html
Html
1 vote192 views1 answer
Angular dynamic background image
Html
0 vote195 views1 answer
Lxml.html get element by id
Html
3 votes182 views1 answer
Figma to html
Html
0 vote188 views1 answer
Block view source html
Html
0 vote178 views1 answer
Html acesskey
Html
-2 votes177 views1 answer
Tags attributes in html
Html
32 votes191 views6 answers
Css viewport
Html
28 votes701 views3 answers
Html with new line \n
Html
40 votes182 views4 answers
Using svg in html
Html