UnitRationalization and UtilizationEquivalentsFrequent UsagesWhen to Use
chCharacter Width: Relative to the width of the “0” (zero) character.N/AMonospaced fonts, gridsFinest for constant character-based spacing.
cmCentimeters: Absolute bodily unit (for print).N/APrint kinds, bodily sizingPrint kinds or particular bodily measurements.
dvhDynamic Viewport Top: Relative to a share of the present viewport’s peak.N/ADynamic, responsive layoutsSuperb for parts that must adapt to the viewport.
dvwDynamic Viewport Width: Relative to a share of the present viewport’s width.N/ADynamic, responsive layoutsAppropriate for responsive elements with dynamic sizing.
emRelative to the font-size of its mother or father.1em = 100% of mother or father’s measurementTextual content sizing, versatile layoutsGood for responsive typography and format.
exx-height: Relative to the peak of the font’s lowercase “x.”N/ATextual content-related spacingHelpful for aligning textual content parts.
inInches: Absolute bodily unit (for print).N/APrint kinds, bodily sizingPrint kinds or particular bodily measurements.
lvhRestricted Viewport Top: Relative to a share of the viewport’s peak, however with limits.N/ARestricted, responsive elementsHelpful for responsive parts inside an outlined vary.
lvwRestricted Viewport Width: Relative to a share of the viewport’s width, however with limits.N/ARestricted, responsive elementsNice for responsive parts inside a specified width vary.
mmMillimeters: Absolute bodily unit (for print).N/APrint kinds, bodily sizingPrint kinds or particular bodily measurements.
laptopPicas: Absolute bodily unit (for print).1pc = 12 factorsPrint kinds, typographyUse for print kinds or typography in print media.
ptFactors: Absolute bodily unit (for print).1pt = 1/72 of an inchPrint kinds, typographyUse for print kinds or typography in print media.
pxPixel: A unit representing a single dot on a display.N/ATextual content, borders, mounted layoutsUse for exact management or non-scalable parts.
QQuarter Millimeters: Absolute bodily unit (for print).1Q = 1/4 of a millimeterExact print layoutsSuperb for very fine-grained management in print kinds.
remRelative to the font-size of the foundation (<html>) component.1rem = 100% of root’s measurementConstant, scalable layoutsSuperb for sustaining a constant scaling issue.
svhScroll-Viewport Top: Relative to the viewport’s peak together with the scrollable space.N/AScrolling elementsAppropriate for scroll-dependent layouts.
svwScroll-Viewport Width: Relative to the viewport’s width together with the scrollable space.N/AScrolling elementsNice for parts that depend upon the viewport plus scrollable space.
viViewport-Share: A share of the preliminary containing block’s measurement.N/ALegacy and particular instancesNot generally utilized in trendy internet design.
vhViewport Top: A share of the viewport’s peak.1vh = 1% of viewport peakFull-page parts, headersUse for responsive, full-height elements.
vmaxViewport Most: Based mostly on the bigger of width/peak.N/AResponsive typographyHelpful for versatile, giant typography.
vminViewport Minimal: Based mostly on the smaller of width/peak.N/AScaling, facet ratiosPreserve facet ratios in responsive designs.
vwViewport Width: A share of the viewport’s width.1vw = 1% of viewport widthSliders, responsive columnsNice for responsive, full-width elements.

source