@kxnzx
Posted
Hi Paul,
-
REM Units are relative to the font-size of the root element. It is best to use REM for defining the width’s of elements, margins, padding, and font-sizes. Using this relative unit is important for accessibility settings, they adapt to the user's browser. People with visual impairment can zoom in to make the font-size/components on the screen bigger/smaller.
-
EM Units are relative to the font-size of the element (2em means 2 x times the size of the current font). It is best to use EM for padding in buttons. The padding will auto adjusts to the font-size of the button. You can also use EM for media queries to scale elements/fontsize, I however have not tried that yet.
-
Pixels are fixed/static. I use them for shadows & borders, because they need to stay the same size always.
-
VW is relative to 1% of the width of the viewport/the browser window size. I personally mostly use VH (viewport height), to define the min-height of the html element. However I have read somewhere that this is not the best practice to do yet, so now I use % instead.
