Responsive design is a technique for designing page layouts so that they are usable on devices with a variety of different screen sizes. Media queries are one of the main tools used for responsive design, as are flexbox and CSS Grid.
A layout that looks good on a high-resolution desktop display might not look so good on an iPhone. Media queries allow you to apply different CSS rules, or even entire style sheets, depending on the size of the viewport.
Media queries have other uses, too. For example, you can apply a different set of styles for when a page is printed than when it is displayed on a screen by using ...
