Measurements are used everywhere so get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size while relative measurements are based on the size of the parents, the font specified in the body tag, or determined by the size of the viewport (window or device size).
Absolute Measurements
You will often specify a width in pixels, such as 300px. That is only natural. How long something is depends on the resolution of the screen. Yes, pixels are relative based on the screen resolution which changes all of the time in web design. However, Apple uses pixel doubling retina displays, to maintain the ideal pixel that hovers around 72 points per inch. Because pixels are the reference for thinking in terms of the display, they are used as an absolute measurement.
Other fixed measurements are pica pc, point pt, millimeter mm, centimeter cm and inch in. They should update regardless of the display’s resolution. An inch should be an inch.
Keyword values are also common, like bold and bolder for the font-weight property. Other value for font weight are from 100 through 900 in multiples of 100. Font weights not available will map onto the closest available font.
Interactive CSS Selectors Demonstrations
Live Demo
- Width in:
- pixels (px)
- points (pt)
- picas (pc)
- inches (in)
- centimeters (cm)
- milimeters (mm)
Relative Measurements
Relative measurements are based on four sources: fonts, percentages, viewport, or container size.
Relative Measurements based on Fonts
In the first years of web design, when a client changed the size of a web page, only the fonts would shrink or expand. To make all the elements on the page change along with the fonts, it was standard to measure everything relative to the size of the page font. That length is expressed in em units, which is the width of the “m” of the font in question. This could become problematic when a percentage of an em, of an em was specified, as the effects accumulated. To avoid this problem, they introduced the root em, or rem, which is based on the size given to the body tag.
You can also express length in terms of the x-height of the font ex and the character ch. Character is mapped onto the width of the zero.
Relative Measurements Based on Percentages
The most common relative measurement is percentage %. When applied to the weight of a child element, it becomes that percentage of the parent element. The parent element is 100%. It is easy to build websites that automatically resize on most devices just by basing the elements on percentages. You still need to use media or container queries for very large and very small sizes.
Relative Measurements Based on Viewport
With the introduction of mobile devices, it became common to base widths on the viewport: vi for viewport inline (this is the width of the browser window or the width of the device). vb is for viewport block. vb These are the logical properties for viewport width and vw and viewport height vh. You can also target the smallest or largest percentage that an object can be: vmin is for viewport minimum and vmax for viewport maximum. Viewport minimum picks the shortest viewport size and viewport maximum chooses the longest viewport size. 1vi is 1% of viewport width, 1vb is 1% of viewport height, 1vw is 1% of viewport width, 1vh is 1% of viewport height, 1vmin is 1vw or 1vh, whichever is smallest and 1vmax is 1vw or 1vh, whichever is largest.
These relative values should be used to accommodate changes in the viewport used to making fluid layouts. Grid layout has a flexible measurement unit designed for fluid layouts, the fractional unit fr. Fr stands for a unit that represents a fraction of the available space in the grid container.
Compare Measurements
Relative sizes are based on the live demo width of 60% of the parent main element, or a font-size of 22px for the body element.
This font-size is unusually large so as to make the text easier to read in class. Usual font-size is 16px. If you change it, the em, x-height based width will change accordingly. The fonts in the document will also change.
If you change the window size, the last 6, viewport inline, block, width, height, vein, and max will all update in real-time.
Live Demo
- Width in:
- em (em)
- reference em (rem)
- x-height (ex)
- percentage (%)
- % of the viewport inline (vi)
- % of the viewport width (vw)
- % of the viewport block (vb)
- % of the viewport height (vh)
- % of the viewport width (vmax)
- % of the viewport width (vmin)
The viewport based measurements update when the window is resized. Em and x-height reflect the body font-size.
Measurements for container queries have their own syntax (not demonstrated here).
- cqw (Container Query Width) – 1% of the container’s width
- cqh (Container Query Height) – 1% of the container’s height
- cqi (Container Query Inline) – 1% of the container’s inline size
- cqb (Container Query Block) – 1% of the container’s block size
- cqmin (Container Query Minimum) – the smaller value of cqi and cqb
- cqmax (Container Query Maximum) – the larger value of cqi and cqb
CSS Calc
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. A useful feature of this function is the ability to mix units. For example, you can multiply pixels with percentage. You can also mix sizing units. CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);}
