Chapter 5 Supplement

This reading summarizes and expands on the concepts of adaptive layouts with media queries that we learned in chapter 5.

If you don't have the book, here's a link to a copy of a scan of the chapter. To respect the author's copyright, the link is only valid on-campus or with a password. Ask Scott if you don't have that password.

FEWD Chapter 5

Visual Viewport versus Layout Viewport

These two viewports can be confusing. This article does a reasonably good job explaining the difference, and there's a nice picture:

visual viewport versus layout viewport

You don't have to read all of it; just enough to understand the difference between the two viewports.

Summary

  • standard term is responsive though I agree with their objection
  • viewports:
    • layout viewport: what the developer (and the browser) uses for
  • layout (where elements go and how big they are: think "magazine layout")
    • visual viewport: what the user sees
  • often the visual viewport is narrower than the layout viewport, requiring
    • zooming out
    • scrolling
  • set the layout viewport with this:
<meta name="viewport"
      content="width=device-width, initial-scale=1">
  • media queries using (in CSS) like this:
@media all and (min-width: 768px) {
    selector {
        flex-direction: row;
    }
    /* other CSS rules */
}
  • setting print styles:
@media print {
    body {
        /* Note "pt" (points) not "px" (pixels).
           72.27pt = 1 inch */
        font-size: 12pt "Times New Roman";
    }
    /* other CSS rules */
}

Media Queries

A media query, like all CSS rules, overrides earlier rules. So, the question is, what is the default: the large device or the small device?

Given the primacy of mobile nowadays, it's better to design for small and later make use of larger devices.

Therefore use min-width:

@media all and (min-width: NNNpx) {
    /* rules for large devices */
}

rather than max-width:

@media all and (max-width: NNNpx) {
    /* rules for smaller devices */
}

Breakpoints

What widths make sense to use to call in a different layout? Common values are:

  • 320px smartphones
  • 786px tablets
  • 1024px laptops and desktops

These are called breakpoints where you switch from one layout to another. See Media Queries for Common Device Breakpoints

Of course, those values aren't cast in stone. New devices and pixel densities are always coming out.