javascript - Resize text acording to screen size -

i have different elements in html different text sizes. want set them dynamic show different font sizes different screen sizes.

what best way? doing makes code ugly:

<script> $(window).resize(function(){ $('#first').css('font-size',($(window).width()*0.2)+'px'); $('h2').css('font-size',($(window).width()*0.02)+'px'); $('h1').css('font-size',($(window).width()*0.03)+'px'); 

for 2 elements ok, have many more. don't have big experience html/css/javascript came with.

since learning want know best way.

maybe have suggestions how improve that?

you use new css units vw,vh (viewport width/height) this.

here's interesting css-tricks article shows how use them typography.

example: (from above article)

h1 {   font-size: 5.9vw; } h2 {   font-size: 3.0vh; } p {   font-size: 2vmin; } 

so h1 have font-size 5.9% of viewport width. etc.

---

that being said, using viewport units font-size in above way problematic because when viewport width narrow - rendered font size become small , vice-versa.

in order overcome problem, can recommend using technique called fluid type aka css locks.

a css lock specific kind of css value calculation where:

• there minimum value , maximum value,
• and 2 breakpoints (usually based on viewport width),
• and between breakpoints, actual value goes linearly minimum maximum.

(from article on css locks explains math involved in great detail.)

so let's want apply above technique such minimum font-size 16px @ viewport width of 600px or less, , increase linearly until reaches maximum of 32px @ viewport width of 1200px.

we use this sass mixin of math css this:

div {   /* linearly increase font-size 16->32px       between viewport width of 600px-> 1200px  */   @include fluid-type(font-size, 600px, 1200px, 16px, 32px); } @media screen , (max-width: 600px) {   div {      font-size: 16px;   } } @media screen , (min-width: 1200px) {   div {      font-size: 36px;   } } 

// ----  // libsass (v3.3.6)  // ----    // =========================================================================  //  //  precise control on responsive typography sass  //  ---------------------------------------------------  //  indrek paas @indrekpaas  //  //  inspired mike riethmuller's precise control on responsive typography  //  http://madebymike.com.au/writing/precise-control-responsive-typography/  //  //  `strip-unit()` function hugo giraudel  //    //  11.08.2016 remove redundant `&` self-reference  //  31.03.2016 remove redundant parenthesis output  //  02.10.2015 add support multiple properties  //  24.04.2015 initial release  //  // =========================================================================    @function strip-unit($value) {    @return $value / ($value * 0 + 1);  }    @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {    @each $property in $properties {      #{$property}: $min-value;    }      @media screen , (min-width: $min-vw) {      @each $property in $properties {        #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});      }    }      @media screen , (min-width: $max-vw) {      @each $property in $properties {        #{$property}: $max-value;      }    }  }    // usage:  // ======    // /* single property */  // html {  //   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);  // }    // /* multiple properties same values */  // h1 {  //   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);  // }    ////////////////////////////////////////////////////////////////////////////    div {    @include fluid-type(font-size, 600px, 1200px, 16px, 32px);  }  @media screen , (max-width: 600px) {    div {       font-size: 16px;    }  }  @media screen , (min-width: 1200px) {    div {       font-size: 36px;    }  }

<div>responsive typography technique known fluid type or css locks.     resize browser window see effect.  </div>

codepen demo

---

further reading

precise control on responsive typography

fluid responsive typography css poly fluid sizing

non-linear interpolation in css