Why is it that sometimes we use percentages, which are relative to the size of the screen, to define sizes, but there are other situations where you are told to use a fixed measure like pixels or em?
Shouldn’t we always use the same unit for the sake of consistency?
From what I understand, percentages are typically used to make something scalable to the size of the viewscreen. This has to do with making the website look good in tablet and mobile devices. Try setting an element to a percentage lower than 100%, and then resize your screen to see what happens (this is one of my favorite things to do. Growing and shrinking the browser window and watching the elements grow and shrink along with it brings me a child-like joy).
Pixels are generally used when you have an element that you don’t want to change size. For example, if you have a side-bar that you want to keep as a fixed size on both desktop and tablet (though, generally you would want to use a media query for this).
Em and rem are my personal favorites, especially when it comes to font sizes. To use rem as an example, say your browser’s font-size is set to the default root size (typically 16px). You can use rem for fonts on your page so they will scale up or down automatically if the user sets a different font size in their browser. This is great for accessibility purposes, because if I user has difficulty seeing smaller font sizes, they can scale up the default and every font on the page will scale according to the new root value.
I’m still learning a lot of this stuff myself, so I may not be exact in my answers here. I’m sure there are more experienced people who can answer this better than I did. I encourage you to do a Google search to find any details I might have left out.
Have a great day!
1 Like
I understand the difference between them. And I agree with you, it’s fun playing with percentage-sized elements.
What I don’t understand is why we don’t use the same unit throughout an entire project, regardless of your unit of choice?
Sorry, I misunderstood.
I’ve noticed that the tutorial doesn’t really explain why we are using so many different ways of sizing elements.
In my own projects I tend to use all three. Do I want this element to always take up half the page width regardless of viewport size? I use percentage. Do I want an image to be one set size on desktop and tablet, and a different set size on mobile? Pixels work for that. Is it a font, or do I want the element to be a fraction of its parent size? Rem and em.
Typically, I don’t come into a project planning on using all three. I just use what works in the moment, and I often try two or three until I get it to do what I want. That’s probably due to my inexperience. I’m sure the pros know right away which method is best.
I hope that helps, and I apologize in advance if I misunderstood your question again. Have a great day!
1 Like
This is a great article that explains the differences and when to use which. Especially check out the last paragraph: CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units | by Madhu M | Medium
1 Like
Thanks for sharing this! I’m going to read through it once I’m done with today’s lesson. 
1 Like