A page must fit its screen
Responsive web design means one web page that changes its layout to fit the width of the screen. A phone, a tablet and a laptop all open the same page and each gets a layout that suits it.
Once you can do this, you write one web app instead of one for every device.
By the end of this lesson
Note
I can make a page fit any screen with the viewport tag and media queries.
Key words
| Word | What it means | Example |
|---|---|---|
| Viewport | the part of the screen the page is drawn in | |
| Responsive | a layout that changes to fit the width of the screen | |
| Media query | a CSS rule that applies only when a condition is true | @media (min-width: 600px) |
| Breakpoint | the width at which the layout changes | 600 px |
| Mobile first | plain rules for a phone, then queries that add room for wider screens |
The cells students fill in are left blank in this preview.
The viewport tag sets the drawing width
Years ago most pages were made for wide screens. So a phone pretends to be wide, draws the page at that width, and shrinks it to fit. The text becomes tiny and you must pinch to read it.
The viewport meta tag switches that off. It sits in the head of the page and asks for a layout as wide as the real screen. The script after the code reads the lab's page and says whether the tag is found.
The viewport tag, line by line
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- width=device-width: draw the page as wide as the screen. -->
<!-- initial-scale=1: start at normal size, with no shrinking. -->Check that the app has a viewport tag
docker exec jupyter python3 steps/viewport.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
A media query applies rules at a width
A media query is a condition around some CSS. The rules inside apply only while the condition is true. The most common condition is a minimum width.
A breakpoint is the width where the layout changes. At 600 pixels a form may move from a column to a row. At 900 pixels a list may split into two columns.
Mobile first CSS, line by line
ul { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
ul { grid-template-columns: 1fr 1fr; }
}
/* The first rule is the phone: one column. */
/* From 900 px up, the second rule gives two columns. */Worked example: which rules apply at each width
| Screen width | Plain rules | min-width 600 | min-width 900 | Layout you see |
|---|---|---|---|---|
| 360 px | Yes | No | No | One column, form stacked |
| 700 px | Yes | Yes | No | One column, form in a row |
| 1200 px | Yes | Yes | Yes | Two columns, form in a row |
The cells students fill in are left blank in this preview.
Mobile first starts with the phone
In a mobile first stylesheet you write the phone layout first, with no query at all. Then you add queries that use min-width to add room as the screen grows.
A phone then applies only the simple rules it needs. The next two commands list the queries in the lab's stylesheet and count the lines that hold one.
List the media queries in the stylesheet
docker exec jupyter python3 steps/breakpoints.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Count the lines holding a media query
docker exec jupyter grep -c "@media" app/style.cssShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
A common mistake
Warning
Many people think a page that looks right in a narrow desktop window will work on a phone. A narrow window shows only the layout. It does not show how big a thumb is or how slow a phone network is. Check the layout in a narrow window, then open the page on a real phone if you can.