What is adaptive (responsive) design?

Adaptive (responsive) design is an approach to layout in which a site automatically adjusts to the screen size and device, keeping it easy to read and interact with. The layout, fonts, grid, and interface elements change their size, position, and behavior for different viewports (phone, tablet, laptop, wide monitors).

Key principles of responsiveness:

1. A flexible grid: blocks stretch and rearrange (Grid, Flex, %, fr, auto).
2. Relative units instead of fixed ones (%, fr, vw, vh, em).
3. Responsive images and media (max-width: 100%, etc.).
4. Media queries for changing styles for different screen widths.

The goal is for the site to be equally convenient on any device, without horizontal scrolling or zooming.