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 96px
- 1in equals to 2.54cm
- 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.
Relative Length units are :
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.
I think this information is helpful to you.
Thanks for reading - Don't Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
Form Validation Styling Using Selector in CSS 3
Advance CSS Selector Become Expert in CSS3
Most Useful & Advance CSS3 Pseudo Classes
CSS Selectors That Every Developer Must Know
JavaScript Web API's That Every Developer Should Know
HTML API's That Every Developer Should Know
👌
ReplyDelete