CODEWITHSUNDEEP
css
yavg
yavg

Reputation: 3061

modify the font size for body and html tags using media queries

I would like to please clarify a doubt. Regardless of the resolution, I am unable to modify the font-size of the body and html tag. I'm trying to change the texts of my page using rem (I understand that this measure is based on the html or body tag, I'm not sure). if I use rem, it would simply be enough to modify the size of the font-size in the mentioned tags, and so my content would change in size. I am right? or what is the best practice? thank you very much.

html, body{
 font-size: 12px;
}

@media (min-width: 576px) { 
  html, body{
    font-size: 12px;
  }

}

@media (min-width: 768px) { 

 html, body{
    font-size: 13px;
  }
}

@media (min-width: 992px) { 
  html, body{
    font-size: 14px !important;
  }
 }

@media (min-width: 1200px) {

  html, body{
    font-size: 15px !important;
  }
 }

https://jsfiddle.net/a0s4qt8w/

Upvotes: 0

Views: 63

Answers (1)

Ramzi Dreessen
Ramzi Dreessen

Reputation: 102

This is correct, but you only need to modify the font-size of <html> to have rem units work as you wish. Modifying <body> will complicate things.

Upvotes: 1

Related Questions