Which is the best unit of sizing?


#1

I am very confused about the different units of HTML the px, em and %. Can anyone tell me which is the best ?

Thanks.


#2

if one where the best, why do all 3 still exist?

em is popular for font-size.

you could make the page a 100% in width, but with a max-width of 1200px so the page doesn't overstretch itself. See how i just used all 3? There is no best

i would recommend reading about each one, there strength and weaknesses and then go practicing, the best way to learn.


#3

Thanks for the reply!, however some googling got me into a conclusion that everyone's coming back to the absolute sizing units because many modern browsers are now became very good at text sizing and there is no need to use the relative sizing techniques.
Here's is the site where I refereed this
https://benfrain.com/just-use-pixels/
And yes it's a headache using the relative sizing units (including me).


#4

yes, relative sizing is more and more important agree. Yet, i would still use px for example for max-width, when i want to prevent my page from overstretching

Yes, relative sizing is more difficult, but given the huge variatity of devices, you have no choice


#5

Thank you very much for your explanation mate!


#6

Generally 1rem = 1em = the height of one line of text = 16px. The short answer is that it's personal preference as to which of those you use. As for %, you want to use that in cases where a div takes up 1/4 of the screen, or something like that.

Traditionally rem and em are considered better than px. However, this is becoming increasingly less true as browsers better adapt and can make a 'pixel' larger or smaller depending on the resolution of the screen.

You can usually use rem and em interchangeably, but em has a couple quirks which can cause it to occasionally act unexpectedy and therefore some have a personal preference towards the simplicity of rem. Some people also find rem and em easier to visualize, but that's just personal preference too.

% is simply the % width or height relative to the parent element. There's also vh and vw which are relative to the height and width of the screen.


#7

This makes sense! Thank you very much.


#8

This topic was automatically closed after 47 hours. New replies are no longer allowed.