Media queries allow a website to adapt to different screen sizes. They act as conditional rules: if the window width matches a specified one, certain styles are applied. min-width means "from this width upwards," while max-width means "up to this width downwards."
Relative units adapt to the context: the user's font size, the container width, and the window size. This ensures the interface appears proportional across devices and respects accessibility settings.
The meta name="viewport" tag tells the browser to use the device's actual width when displaying a page. Without it, a website on a phone looks like a scaled-down version of a desktop, with small text and clunky navigation. With it, styles and media queries work correctly, and the content remains legible.