How it works
Responsive layouts use fluid grids (flexbox and CSS grid), images that scale, and media queries that change the layout at chosen widths called breakpoints. The viewport meta tag tells phones not to zoom out to a desktop-sized page. Mobile-first means writing the small-screen layout first and adding rules as space grows, which keeps the base CSS simple.
Newer tools make it more precise: container queries let a component adapt to the space it sits in rather than to the whole screen, clamp() scales text smoothly, and srcset serves smaller images to smaller screens. Touch targets need to be large enough for fingers. Google indexes the mobile version of pages, so a poor phone layout also hurts SEO.
Related terms
More in Frontend
Craft