CSS Units That Every Developer Should Know
CSS Unit help to determine the CSS property size to the HTML elements.
What is CSS Unit?
CSS Unit help to determine the CSS property size to the HTML elements.
Most of the time px(pixel) and percentage(%) is used in UI development.
The percentage is mostly used to determine the content width and height.
Pixel(PX) is mostly used for determining the font size, margin, padding, etc.
Most of the CSS props take length values like width, margin, padding, font size.
There are two types of length Units:
1) Absolute Lengths
2) Relative Lengths
1) Absolute Lengths
Absolute Length units are fixed.
Absolute Length units are not preferred for screen-based UI, because screen size will differ based on the device. so if you use the absolute length unit it won’t change it will display the same size on all the screens.
Absolute Length units are preferred for print layout.
Absolute Length units are :
- cm (Centimeters)
- mm (Mile meter)
- in (Inches) => 1in equals to 2.54cm && 1in equals to 96px
- px (pixels) => 1px equals to 1/96th of 1inche
- pt (points) => 1pt equals to 1/72 of 1inche
- pc (picas) => 1pc equals to 12pt
Note: px units are relative to the viewing device.
low-dbi devices 1px is equaled to 1 device pixel.
2)Relative Lengths
Relative length units specify a length referring to another length property.
Relative length units help to design different size UI based on the device and screen size.
1)em
em is referring to the font size of the element.
3em means 3times of the size of the current font size.
2)ex
em is referring to the x-height of the current font.
em is rarely used.
3)ch
ch is referring to the width of zero.
4)rem
rem is referring to the font size of the root element.
em is rarely used.
5)vw
vw is referring to viewport width.
1vw is equals to 1% of width of the view port.
6)vh
vh is referring to view port height.
1vh is equals to 1% of height of the view port.
7)vmin & vmax
vmin & vmax is referring to view port dimension.
vmin works smaller dimension.
vmax works larger dimension.
9)%
% is referring to the parent element.
Any suggestion or queries please comment, our team will response asps.
Originally published at https://www.attractiveaurora.com on September 22, 2021.
