CODEWITHSUNDEEP
css
Xeon
Xeon

Reputation: 395

Using rems for responsive web design

Are people still using those complex 62.5% font tricks in 2022 for every element in a website? Rem units for fonts, padding, margins, boxes' sizes everything?

I come across articles like this: https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/#setting-the-root-font-size-to-625percent

and to be honest, the math is really confusing. It doesn't help that I failed my math in school (I can do basic arithmetic operations but these math concepts are challenging to me).

Upvotes: 1

Views: 375

Answers (1)

Nayeem M. Muzahid
Nayeem M. Muzahid

Reputation: 139

Well, you do not need to know advanced math for this. You just need to know how rems work. "rem" always inherits the font size of the root element like an HTML tag. In the article, you will see that html{ font-size: 62.5%' or html{ font-size: 10px}. Now if we assign font size to any other elements with rem it will multiply the root elements' font size with its own font size. Check this out....

html{
 font-size: 62.5%;  //10px
}

p{
 font-size: 1rem; //10px;
}

h1{ font-size: 2rem } //20px;

you can control all the properties with this method easily. It is an easy approach to responsive design. If you use SCSS, it will be easier in case of responsive design.

Upvotes: 2

Related Questions