Responsive design and media queries
One page has to work on a 360px phone and a 1024px laptop window. Add the viewport meta tag so the phone lays the page out at its own width, write a one-column layout first, then use a media query, @media (min-width: 700px), to add two columns only on wide screens. Watch the browser test each screen's width, split the laptop into 2fr and 1fr columns, and switch back the moment the window is dragged below 700px.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01A page has no viewport meta tag. What does a typical phone browser do with it?
Without the tag, mobile browsers assume a desktop page: they lay it out in a virtual viewport, often 980px wide, then shrink it, so the text ends up tiny.
02Which rule applies at a viewport width of exactly 700px? @media (min-width: 700px) { … }
min-width is a minimum: the query is true when the width is 700px or more. At 699px it is false; at 700px it is true.
03The stylesheet is mobile first. What does that mean?
Mobile first means the base rules (no media query) are the simple, narrow layout. min-width queries then add the extras that wide screens have room for.
04A laptop window is 1024px wide. The page has an 8px body margin on each side, gap: 16px and grid-template-columns: 2fr 1fr. How wide is main?
The page is 1024 − 16 = 1008px wide. Take away the 16px gap: 992px of free space, split into 3 shares of about 330.7px. main gets two shares, about 661.3px.
05You drag a browser window from 1024px down to 600px. What happens to the @media (min-width: 700px) rules?
The browser re-evaluates media queries whenever the viewport changes. Below 700px the query is false, so the two-column rule stops applying and the layout stacks again.
Glossary
- Responsive design
- Building one page whose layout adapts to the size of the screen or window showing it.
- Viewport
- The area a page is laid out in: the browser window, or the screen on a phone.
- Viewport meta tag
- <meta name="viewport" content="width=device-width"> in the head: tells a phone to make the viewport as wide as its screen in CSS pixels.
- CSS pixel
- The unit CSS widths are measured in. One CSS pixel can be several of the screen's device pixels.
- Media query
- A condition about the device, such as (min-width: 700px). The rules inside @media apply only while it is true.
- min-width
- A media feature meaning at least this wide: (min-width: 700px) is true at 700px and above.
- Breakpoint
- A width at which the layout changes, because a media query starts or stops applying.
- Mobile first
- Writing the small-screen layout as the base rules, then adding wider layouts with min-width media queries.
Notes and sources
- A real browser checks the media query and applies every rule at once, while it works out the style of each element. The figure goes one step at a time so you can see each part.
- 980px is the virtual viewport width MDN uses as its example and a common choice (Safari on iPhone uses it); other mobile browsers may pick other widths. Without the meta tag the phone's width would even pass the min-width: 700px test and get the desktop layout, shrunk.
- Widths in CSS are in CSS pixels, not screen dots. A phone 360 CSS pixels wide often has 1080 device pixels across (3 per CSS pixel), so text stays sharp at a readable size.
- Here the content of each box has a fixed height (main 200px, aside 120px) so the picture stays simple; real text gets taller as its box gets narrower. In two columns, grid items stretch to the height of their row, so aside grows to 200px.
- The width a media query tests includes a scroll bar, if the browser draws one beside the page. The figure assumes overlay scroll bars (as on phones and by default on macOS), so the tested width and the layout width are the same.
- Save the full page as index.html and the rules as style.css in one folder, open index.html and drag the window narrower and wider: the layout switches at 700px.
Quiz Unlocks after the last step.