Earlier you examined the monocolumn pattern, a layout that centered the content into a single column centered in the browser's viewport. Try popping this earlier example out and viewing in a mobile-sized viewport using your browser's developer tools:
It is unreadable. First you add a meta viewport element to fix the sizing:
When you view this page on a small screen, you see a very narrow column of content and a lot of wasted space in the margins. Restricting the column to 50% of the viewport doesn't make sense when space is at a premium. So, you decide to add a media query to expand the column on small screens.
The max-width feature is used to target devices whose widths are less than some threshold. This media query targets devices that are no wider than 400 pixels:
Even a desktop computer can trigger a media query based on max-width. Try adjusting the threshold and your window size to see the column fill the Preview panel.
Some developers prefer a mobile-first approach to responsive web design. They start by setting the baseline properties so that the content is accessible on a mobile device. Then they add media queries that override these styles on larger screens. In a mobile-first approach, the main element would default to a width of 100%, and then a media query based on min-width would narrow it on large screens. The philosophy behind mobile-first design is that a page designed for small screens is more likely to be usable on large screens than a page designed for a large screens is to be usable on small screens.