how to make font size responsive for different size devices with one time declaration

Question

Facing problem with the font-size setting issue. for sake of better readability I am changing my font-size for different devices i.e mobile,tablets and extra small devices in this way my css is increasing that is fatal for page speed and optimization as well.I just want to adjust my font-size automatically according to container size. Here is my example code which i am writing for different devices and images for output to understand the problem

.heading{font-size: 50px;}

@media all and (min-width: 768px) and (max-width: 800px){
  .heading{font-size: 40px;}
}

@media all and (min-width: 400px) and (max-width: 480px){
  .heading{font-size: 30px;}
}

@media all and (min-width: 320px) and (max-width: 375px){
 .heading{font-size: 20px;}
}

<h1 class="heading">Font size issue for different devices</h1>

score 0 · Answer 1 · edited Jul 14 '17 at 10:59

.heading {
  font-size: 50px;
}

@media (max-width: 800px) {
  .heading {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .heading {
    font-size: 30px;
  }
}

@media (max-width: 375px) {
  .heading {
    font-size: 20px;
  }
}

<h1 class="heading">Font size issue for different devices</h1>

When you use media query use only @media (parameter) Or use

.heading{font-size: 100%;}

score 0 · Answer 2 · answered Jul 12 '17 at 06:10

**.heading{font-size: 20vw;}
==============
@media (max-width: 800px){
  .heading{font-size: 16vw;}
}
==============
@media (max-width: 480px){
  .heading{font-size: 14vw;}
}
==============
@media (max-width: 375px){
 .heading{font-size: 12vw;}
}
==============
 - List item
# vw doest not support in safari browser #

score 0 · Answer 3 · answered Jul 12 '17 at 06:53

Use em for responsive websites. The em is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt

.heading{font-size: 1.6em;}

@media (max-width: 800px){
  .heading{font-size: 1.4;}
}

@media (max-width: 480px){
  .heading{font-size: 1.2em;}
}

@media (max-width: 375px){
 .heading{font-size: 1em;}
}

<h1 class="heading">Font size issue for different devices</h1>

The em may be scalable, but that still won't automatically change the font-size. So this sadly doesn't answer the question asked. — Harry Svensson, Jul 12 '17 at 06:56

how to make font size responsive for different size devices with one time declaration

3 Answers3