Responsive Design

Core techniques for flexible layouts and content-first breakpoints.

Term / Syntax	Name	Description	Example
Mobile-first	Progressive Layout	Starts with small-screen styles and adds enhancements as space becomes available.	@media (min-width: 48rem) { ... }
max-width	Flexible Media/Content	Prevents an element from growing beyond a useful size.	img { max-width: 100%; height: auto; }
min()	Choose Smaller Value	Uses the smallest value from a list.	width: min(70rem, 92%);
max()	Choose Larger Value	Uses the largest value from a list.	padding-inline: max(1rem, 4vw);
clamp()	Fluid Bounded Value	Lets a value grow fluidly between minimum and maximum limits.	font-size: clamp(2rem, 5vw, 4rem);

Conditional styles based on viewport/media characteristics and user preferences.

Term / Syntax	Name	Description	Example
@media (min-width: ...)	Minimum Width	Applies styles when the viewport is at least the given width.	@media (min-width: 60rem) { ... }
@media (max-width: ...)	Maximum Width	Applies styles while the viewport is no wider than the given width.	@media (max-width: 42rem) { ... }
prefers-color-scheme	Theme Preference	Detects the user's light/dark operating-system preference.	@media (prefers-color-scheme: dark) { ... }
prefers-reduced-motion	Motion Preference	Detects a request to minimize nonessential motion.	@media (prefers-reduced-motion: reduce) { ... }
prefers-contrast	Contrast Preference	Detects a preference for more or less contrast where supported.	@media (prefers-contrast: more) { ... }

Styles based on a component's available container size rather than the whole viewport.

Term / Syntax	Name	Description	Example
container-type	Establish Query Container	Makes an element eligible for size container queries.	container-type: inline-size;
container-name	Name Container	Assigns a reusable name to a query container.	container-name: card-layout;
@container	Container Query	Applies styles based on the query container's dimensions.	@container card-layout (min-width: 32rem) { ... }
cqi	Container Inline Unit	Represents 1% of a query container's inline size.	font-size: clamp(1rem, 4cqi, 2rem);

HTML and CSS tools for loading and sizing media appropriately.

Term / Syntax	Name	Description	Example
srcset	Image Candidates	Provides multiple image sources and lets the browser choose.	<img srcset="small.jpg 480w, large.jpg 1200w" ...>
sizes	Expected Display Size	Describes how much layout width an image will occupy at different conditions.	sizes="(min-width: 60rem) 50vw, 100vw"
<picture>	Art Direction	Lets different image sources be selected with source/media conditions.	<picture><source media="(min-width: 60rem)" srcset="wide.jpg">...</picture>
object-fit	Media Fit	Controls how replaced content fits inside its box.	object-fit: cover;
aspect-ratio	Stable Ratio	Creates a preferred width-to-height relationship.	aspect-ratio: 16 / 9;