DEV Community

Discussion on: What CSS tip do you want to share with others?

Collapse
 
nicolalc profile image
Nicola

Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:


html {
  // with 100% 1rem === 16px
  font-size: 100%;
}

p {
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  html {
    // at 90% 1rem equals to (16px/100 * 90) = 14.4px
    // our p element will have font-size: 14.4px
    font-size: 90%;
  }
}
Collapse
 
bayuangora profile image
Bayu Angora

I use this too, but I put the initial font size on body rather than html. Which one is better?

Collapse
 
nicolalc profile image
Nicola

Currently, there is another one:

:root

I think this is the best, I don't think there are differences between HTML and body. Personally I prefer to use html instead of body for font-family and size, but It's a personal idea 😎

Thread Thread
 
bayuangora profile image
Bayu Angora

Thanks.