Following are the different length properties used in CSS
1. px – I know you all know this 🙂
It is based on device px and it is not related to Screen pixels but its angular measurement
.className { width: 200px; }
2.in,cm and mm
Inches and centimeters are a physical measurement, but in CSS land, they just map directly to pixels.
1in == 96px
1cm == 37.8px
1mm == 0.1cm == 3.78px
3.Em ( Font-Relative Lengths)
A relative unit. Originally a typographic measurement based on the current typefaces capital letter “M”. Although the length doesn’t change when you change font-family, it does change when you change the font-size.
body{ font-size: 16px; } ul{ font-size: 14px; } ul li{ font-size: 1em; } // 1em == 14px inherited from ul element
4. REM
A relative unit, like em, but it is always relative to the “root” element (i.e. :root {}
) rather than using the cascade like em does. This vastly simplifies working with relative units. so if you change root element font size all values will changes accordingly.
html{ font-size: 16px; } ul{ font-size: 20px; } ul li{ font-size: 1rem; } // 1em == 16px inherited from html element
Notable browser support issues: doesn’t work in IE 8, Safari 4, or iOS 3.2.
5.Points
A point is a physical measurement equal to 1/72 of an inch. Points is the most common way to size type outside of CSS (likely why it is supported in CSS).
6.ex
This is a measurement based on the x-height of the current font. Unlike ems, which don’t change when you change the font-family, ex units do change when you change the font-family, as the value of one unit is specifically bound do that font.
7.ch
This is similar in spirit to x-height, only ch is based on the width of the zero (0) character instead of the height of the x character. It also changes as the font-family changes.
8.VW
This is the “viewport width” unit. “1vw” is equal to “1%” of the width of the viewport. It is similar to percentage, except that the value remains consistent for all elements regardless of their parent elements
9.vh
This is the same as the vw (viewport width) unit only it is based on the viewport height instead.
10.VMAX
This value will be whichever is smaller at the moment, vw or vh. In the standard use case of sizing type, this may be a more useful metric than vw or vh on their own in determining true screen size.
11.VMAX
This value will be whichever is larger at the moment, vw or vh. not have good browser support
1 comment
Thanks