Useful CSS units You should know
A thread 🧵👇
📌 px :
The px unit is the magic unit of CSS
The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.
📌 Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
Viewport Width (vw). This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.
📌 Percentage % :
It is often used to define a size as relative to an element's parent object
📌 em : em units for the font-size property will be relative to the font-size of the parent element.
em units on other properties than font-size will be relative to the font-size of the current element.
📌 rem : The rem unit, short for root em is a relative unit that’ll always be based upon the font-size value of the root element, which is the <html> element.
So that means that, by using the rem unit, the values of parent elements are ignored, and only the value of the root is taken into consideration.
📌 ch :
Relative to the width of the "0" (zero)
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.