How do I know what height/width to set for CSS? [closed]

Question

I don't fully understand how to determine rem, em, px, or %.

I know what each one means, but it's still unclear to me to know when to use each one. What are the criteria for knowing which ones to use?

Your input is greatly appreciated.

Answer 1

Pixels px, points pt etc are considered as absolute units. Good place to use pixel definition is when you want some element maintain consistent sizing i.e. the element should not be resized. E.g. icons, certain images or layout decorations could be defined using px.

On the other hand em, rem, %, vw, vh etc are relative units and better fit for responsive design. Relative units are calculated from the base sizes. Difference between em and rem is that em is based on the parent element whereas rem is based on the root element. These are good for font sizing, e.g. if the user defines their browser base font to 14px (normally 16px is the default size), the website fonts using em / rem would adjust to its users wishes but px would not do so.

Percent definition % is commonly used in layout elements where the overall layout is broken down into percent sized columns. These columns will adjust when the screen size changes, and alongside media queries these column percentages can be thereby adjusted based on screen size.

From my personal point of view viewport width vw and viewport height vh are less used but useful when you need to layout something according to actual viewport size. E.g. creating 2 colored or layered background could be one use case for this.