Hello guys, I recently read some conflicting theories on CSS relative unit (%, em and rem)… Some readers advocate using percentages, and yet others rem’s and em’s or combinations of all the above to achieve a scalable/responsive design… Now, which relative unit is the best to use on these properties (font size, images, padding, margin, height & width, Media queries etc.) To achieve a responsive web design page… Y’all help will be greatly appreciated, thanks!!!
The short answer is that you don’t need any of them to have a fully responsive design in all browsers and devices since the beginning of time as plain html works everywhere. 
It may look pretty ugly but will be fully responsive.
Your question is too involved to give a short answer because the answer is always “It depends”!
A responsive page can be in percent , or it can simply have a max-width (in px or em/rem or other units). Or it can be an adaptive approach (which I dislike) where a series of fixed widths are manipulated via media queries at appropriate breakpoints.
I prefer pages built with max-width as anything too wide is hard to read and say an 80% width on my 27" imac is impossibly wide. You could use px for the max-width or you could use ems or rem. Ems will allow the page to expand on text-size but as a personal preference I dislike my page getting too wide so you’d need to have a max-width set in percentage also. There is however nothing wrong with setting a max-width in px (contrary to popular opinion).
As to applying width and height to inner elements that you would rarely add a height to anything that holds fluid content like text.
For padding I generally use px rather than percentage as I dislike the way the elements stretches and squashes. I like the content to be responsive but I’d rather the padding stayed consistent. Indeed some of these stretchy boxes in percentage make me feel queasy I would be careful if you use em on padding as that will vary on the font-size of the parent so you could end up with different sized padding on various elements when you wanted them all to be uniform. The same applies to margin and I would avoid ems for margins.
Font-sizing should generally be sized in anything other than px. I use rems these days to avoid compounding but ems can also be use as long as you know what the implications are. Note that as far as font-size goes then percent and em are the same thing (.8em = 80%).
Images are best styled as a max-width in percent with a height :auto. Pixels are fine for images if you want then to remain fixed in size but often you will want then to stretch so a max-width of 100% will allow then to fit smaller spaces than their original size. Or width:100% if you just want them to always stretch.
I always size borders in px because 1px is the smallest you can go and if you try and guess with something like .03em you may end up with no border at all depending on the parents font-size
Media queries can be in em, rem or px depending on your preference. I generally use px because devices are in px width and its just easier for me to visualise that way but ems are just as good and will allow for font-sizing increase as mentioned earlier. In the end it comes down to a personal preference and the exact dynamics of the layout involved.
Your question while seemingly simple on the surface does require a knowledge of how all css interacts with each other and its not a black and white question.
There is no one approach that is right but there are many approaches that will be wrong.
3 Likes
As usual, the master (think jedi but for css) has spoken more eloquently than I could, but he’s absolutely right. Font sizing (and line height) are the best places for em/rem to be used, and px/% for everything else.
The one piece I would expound on his comment on compounding, and the difference between em and rem. em works as it sizes based on the container it is in, where rem is always based on the root size.
So for example, say you have this setup
<style>
body { font-size: 10px; }
.em1 { font-size: 2em; }
.em2 { font-size: 3em; }
.rem1 { font-size: 2rem; }
.rem2 { font-size: 3rem; }
</style>
<body>
<div class="em1">
This text will be 20px
<div class="em2">
This text will be 60px
<div class="em1">
This text will be 120px
</div>
</div>
</div>
<div class="rem1">
This text will be 20px
<div class="rem2">
This text will be 30px
<div class="rem1">
This text will be 20px
</div>
</div>
</div>
</body>
Now this is a REALLY simple base-10 example and the sizes get larger. When you get into any of the following, the advantage or rem over em becomes much more obvious:
- When you get into odd math for non base-10 font-sizing, or you set the base font to a percentage to allow for user selected sizing, the math can get REAL hairy real quick.
- You mix and match larger and smaller sizes, etc.
2 Likes
Thanks Paul and @DaveMaxwell, your inputs has clarified a lot of things for me… Personally, I use rems left and right In my stylesheet, setting HTML font-size to 62.5% made using rem units easier for me as 1rem=10px etc… Are this CSS best practices ?? Also most times, I set my container’s to a fixed of 100% and a height of 9rem( 90px )… i also utilize rems units for my font-size, margins, padding , line heights and general sizing in my CSS… In my @media queries, I use Px for the max and min width (e.g @media screen and (max-width: 952px){ } but subsequent properties inside of it use the rem units… Is this a good practice for responsive web design or I am doing the wrong thing ?? Thanks once again!
It depends what the website is but that strikes me as rather small for a modern website.
1 Like
It’s OK as long as no one has changed the browser default from the “standard” 16px (though chromium based browsers don’t allow “pixel” sizing anymore). 62.5% converts over to 10px.
Thanks @Gandalf, @DaveMaxwell- what if after setting (HTML to 62.5%), I also set my body to 1.6rem (equivalent of default 16px for browsers) can this solve the small font size issue?? Thanks
If you want the browser default, you don’t need to set any size and the browser will start with the default. Or if you want to cover your six, just set html to 100%.
Remember, the browser is going to use the default unless instructed otherwise.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.