Units
Used to measure the length & set accordingly
- turned_in_notUnits
- %,mm,cm,in,px,pc,pt
- em,rem
- ms,s
- vw,vh,vmax,vmin
- deg,grad,rad,turn
- fr
Standard units
Commonly used units (%, mm, cm, in, px)
% : percentage, mm : millimeter, cm : centimeter, in : inch , px : pixel, pt, pc
100mm = 1cm = 2.54in
1in = 6pc = 72pt = 96px
Font based units
Units that are dependent on the font-size (em, rem)
1rem = 1 x root element font-size (<html>)
1em = 1 x current element font-size
For example:
If current element font-size is 12px, & if you use 'em' unit for other properties (say 'height') then 1em = 12px
If root-element (<html>) font-size is 15px, & if you use 'rem' unit for other properties (say 'height') then 1rem = 15px
Time based units
Units that are used to define time (ms, s)
ms : millisecond, s : second
1000ms = 1s
Window based units
Units that are dependent on your window screen size (vw, vh, vmax, vmin)
vw : viewport-width , vh : viewport-height, vmax : maximum-viewport, vmin : minimum-viewport
100vw = window width
100vh = window height
100vmax = max window(height, width)
100vmin = min window(height, width)
vmax: selects maximum value out of window height or width
vmin: selects minimum value out of window height or width
Circle based units
Units that defines circular unit, mostly famous degree (deg, rad, grad, turn)
deg : degree, rad : radian, grad : gradian, turn
1rad = (180/pi)deg = 57.3deg(approx)
200grad = 180deg
1turn = 360deg
Grid unit
New unit, specially used for grid (fr : fraction)
The new fr unit work like maths ratio concept, when you use Grid, you will get to know !
So,