10Web Website Builder offers various units of measurement for sizing elements, with options like PX, EM, REM, %, VW, and VH. Understanding what these units mean and their appropriate application is crucial for responsive and accessible design.
Absolute vs. Relative
Absolute measurements refer to values that are not subject to any restrictions or conditions, providing an unchanging standard for comparison. On the other hand, relative measurements depend on specific contexts, references, or conditions, and they may vary based on changing circumstances.
Absolute units
- PX: Pixels are fixed units on a given device, but they can be influenced by device resolution. They are practical for elements that require consistent sizing but can pose challenges for responsive design. Pixels are ideal for elements that do not require resizing.
Relative units
- EM: This unit is dependent on the parent element.
- REM: Relative to the root (HTML) element.
- %: A percentage relative to the size of the parent element.
- VW (viewport width): A viewport width unit, relative to the width of the viewport.
- VH (viewport height): A viewport height unit, relative to the height of the viewport.
Relative units adapt to different screen sizes and parent element sizes, making them ideal for responsive and fluid layouts.
EM and REM explained
- EM: Sizes are calculated based on the parent element's font size, which can lead to unexpected sizes when nesting elements.
- REM: Sizes are calculated based on the root element's size, providing consistency regardless of parent sizing.
%, VW, and VH explained
These units are typically used for layout dimensions like margins, padding, width, and height. For example, using % for column widths ensures responsive adjustments, while VW and VH can create elements that fill the entire viewport's width or height.
Measurement type and their uses
- Use PX for precise, fixed dimensions.
- Use EM for scaling related to the parent element’s font size.
- Use REM for consistent scaling relative to the root element.
- Use VW/VH for dimensions that respond to the viewport's size.
- Use % for relative sizing to the parent element’s dimensions.
To change the measurement type, check this article.