Easy way to implement responsive font sizing

user_5940124 0
Viewed 67

Is there a way of setting all font sizes to scale down x amount in a media query, instead of setting font size for each element ( h1, h2, h3 ). Currently I have a media query that looks like this:

@media only screen and (min-width : 1200px) {
  body {
   font-size: 20px;
  }  
}

This, however, doesn't set sizes for headings. Is there any way to include all text on a site? Thanks

twitter-bootstrap-3 css html
2 Answers

Yes, basically you set font size in pixels for a root element like html and then you can use rem units to set font sizes for other elements. In your @media rule you will have to change just font-size property for html element and it will equally affect other elements since they depend on root's font-size because you use rems.

html {
    font-size: 12px;
}

p {
    font-size: 1.1rem;
}

.footer {
    font-size: .9rem;
}

@media (max-width: 767px) { 
    /* now the basis for all the font sizes set in
    rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
    Previously it was 1.1*12 = 13.2px. */
    html {
        font-size: 10px;
    }
}
user_73555330 

div{font-size:15px;}
@media screen and (max-width:1200px) {
  div{font-size:20px;}
}
@media screen and (max-width:600px) {
  div{font-size:25px;}
}
@media screen and (max-width:320px) {
  div{font-size:50px;}
}
<div>test font size</div>

user_48261380
Related