CSS has lots of units for expressing the length and measurement. CSS units in which length is measured can be either absolute such as pixels, points and so on, or relative such as percentages (%) and em units.
Absolute Length:
It is not good for use on screen, cause screen size varies so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known.
Pixels are a widely used measurement units. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by the device (think high-DPI devices vs non-retina devices).
It is good for use on screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.
Relative length units are as follows:
em
An em is equal to the computed font-size of that element’s parent. like, if there is a <div> element defined with font-size: 16px then for that <div> and for its children 1em = 16px.
rem is the same as em, but instead of varying on the current element font size, it uses the root element (Html) font size. You set that font size once, and rem will be a consistent measure across all the page.
vmin is the viewport minimum unit represents the minimum between the height or width in terms of percentage. 20vmin is 20% of the current width or height, depending on which one is smaller.
vmax is the viewport maximum unit represents the maximum between the height or width in terms of percentage. 10vmax is 10% of the current width or height, depending on which one is bigger.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok