Responsive web design adapts layouts to the user's device, beginning with the viewport meta tag: ``. Without it, mobile browsers render the page at a desktop width (typically 980 pixels) and scale it down, which breaks responsive techniques entirely. The foundation of responsiveness is the media query, written as `@media (max-width: 768px) { ... }`, which applies styles conditionally based on device characteristics. Common media features include `min-width` and `max-width` for viewport size, `orientation` for portrait versus landscape, `prefers-color-scheme` for detecting dark-mode preferences at the OS level, and `prefers-reduced-motion` for users who have requested less animation. The mobile-first approach writes base styles for small screens and adds complexity for larger ones using `min-width` media queries, resulting in faster mobile loading and cleaner progressive enhancement. Container queries, declared with `@container (min-width: 400px) { ... }` after setting `container-type: inline-size` on the parent, respond to the size of a containing element instead of the viewport, enabling truly reusable components that adapt to wherever they are placed.
CSS offers a rich set of length units. Absolute units like pixels (`px`) define fixed sizes, while relative units adapt to context: `em` is relative to the parent element's font-size, `rem` is relative to the root element's font-size (typically 16 pixels by default), `%` is relative to the parent dimension, `vw` and `vh` are 1% of the viewport width and height, `vmin` and `vmax` are 1% of the smaller or larger viewport dimension, and `ch` equals the width of the `0` glyph in the element's font. The `ch` unit is ideal for setting optimal line length on body text, with `max-width: 65ch` producing about 65 characters per line, the recommended measure for readability. Because `em` cascades (a `1.5em` font-size inside a `1.5em` parent becomes 2.25 times the root), `rem` is generally preferred for global sizing, while `em` shines for component-relative scaling, since `padding: 0.5em 1em` on a button scales proportionally when the button's own font-size changes. Note that `em` refers to the parent's font-size when applied to `font-size` but to the element's own font-size when applied to `padding`, which makes components nicely scalable.
CSS custom properties, also known as CSS variables, store reusable values defined with a double-hyphen prefix and accessed with `var()`. Variables can be declared on any selector but are most commonly defined on `:root` for global use, and they cascade and inherit like any other property, allowing them to be scoped or overridden locally. They make theming straightforward: defining `--bg` and `--text` on `:root` for a light theme and overriding them on `[data-theme="dark"]` for a dark theme lets every element reference the same variables without rewriting any rules, and a JavaScript call that toggles the `data-theme` attribute swaps themes instantly. Custom properties can also be changed dynamically via JavaScript for animations and interactive feedback. The `@property` rule registers a custom property with a specific type, initial value, and inheritance behavior, which lets the browser interpolate the property natively instead of treating values as strings, unlocking smooth animation of CSS variables.
Modern CSS includes powerful math functions for fluid, responsive values. The `min()` function picks the smaller of its arguments, so `width: min(100%, 800px)` ensures an element never exceeds 800 pixels regardless of container size. The `max()` function picks the larger, useful for ensuring minimum sizes. The `clamp(min, preferred, max)` function returns a value between the minimum and maximum, with an ideal preferred value in between, making it perfect for fluid typography like `font-size: clamp(1rem, 2.5vw, 2rem)`, which scales smoothly between 1 and 2 rem depending on viewport width. The `aspect-ratio` property sets a preferred width-to-height ratio for an element, with `aspect-ratio: 16 / 9` keeping a video frame stable across screen sizes without padding tricks. Other accessibility- and theme-aware features include `accent-color` for theming native form controls like checkboxes, radio buttons, and range sliders with one declaration; `color-scheme` for declaring light and dark support so the browser can adapt its UI; and the `forced-colors` media query for detecting Windows High Contrast Mode, where special keywords like `Canvas`, `CanvasText`, `ButtonFace`, and `ButtonText` reference the user's chosen system colors.