| Unit | Explanation and Usage | Equivalents | Common Usages | When to Use |
|---|---|---|---|---|
ch |
Character Width: Relative to the width of the "0" (zero) character. | N/A | Monospaced fonts, grids | Best for consistent character-based spacing. |
cm |
Centimeters: Absolute physical unit (for print). | N/A | Print styles, physical sizing | Print styles or specific physical measurements. |
dvh |
Dynamic Viewport Height: Relative to a percentage of the current viewport's height. | N/A | Dynamic, responsive layouts | Ideal for elements that need to adapt to the viewport. |
dvw |
Dynamic Viewport Width: Relative to a percentage of the current viewport's width. | N/A | Dynamic, responsive layouts | Suitable for responsive components with dynamic sizing. |
em |
Relative to the font-size of its parent. | 1em = 100% of parent's size | Text sizing, flexible layouts | Good for responsive typography and layout. |
ex |
x-height: Relative to the height of the font's lowercase "x." | N/A | Text-related spacing | Useful for aligning text elements. |
in |
Inches: Absolute physical unit (for print). | N/A | Print styles, physical sizing | Print styles or specific physical measurements. |
lvh |
Limited Viewport Height: Relative to a percentage of the viewport's height, but with limits. | N/A | Limited, responsive components | Useful for responsive elements within a defined range. |
lvw |
Limited Viewport Width: Relative to a percentage of the viewport's width, but with limits. | N/A | Limited, responsive components | Great for responsive elements within a specified width range. |
mm |
Millimeters: Absolute physical unit (for print). | N/A | Print styles, physical sizing | Print styles or specific physical measurements. |
pc |
Picas: Absolute physical unit (for print). | 1pc = 12 points | Print styles, typography | Use for print styles or typography in print media. |
pt |
Points: Absolute physical unit (for print). | 1pt = 1/72 of an inch | Print styles, typography | Use for print styles or typography in print media. |
px |
Pixel: A unit representing a single dot on a screen. | N/A | Text, borders, fixed layouts | Use for precise control or non-scalable elements. |
Q |
Quarter Millimeters: Absolute physical unit (for print). | 1Q = 1/4 of a millimeter | Precise print layouts | Ideal for very fine-grained control in print styles. |
rem |
Relative to the font-size of the root (<html>) element. |
1rem = 100% of root's size | Consistent, scalable layouts | Ideal for maintaining a consistent scaling factor. |
svh |
Scroll-Viewport Height: Relative to the viewport's height including the scrollable area. | N/A | Scrolling components | Suitable for scroll-dependent layouts. |
svw |
Scroll-Viewport Width: Relative to the viewport's width including the scrollable area. | N/A | Scrolling components | Great for elements that depend on the viewport plus scrollable area. |
vi |
Viewport-Percentage: A percentage of the initial containing block's size. | N/A | Legacy and special cases | Not commonly used in modern web design. |
vh |
Viewport Height: A percentage of the viewport's height. | 1vh = 1% of viewport height | Full-page elements, headers | Use for responsive, full-height components. |
vmax |
Viewport Maximum: Based on the larger of width/height. | N/A | Responsive typography | Useful for flexible, large typography. |
vmin |
Viewport Minimum: Based on the smaller of width/height. | N/A | Scaling, aspect ratios | Maintain aspect ratios in responsive designs. |
vw |
Viewport Width: A percentage of the viewport's width. | 1vw = 1% of viewport width | Sliders, responsive columns | Great for responsive, full-width components. |
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)