Great question! It gets to the heart of what's going on today.

Last time, we learned flexbox and, for example, flex-direction: row versus column. But to make that change, we'd have to (1) edit the CSS file, (2) save it, (3) refresh the browser.

Today, we'll have the browser switch from column to row if the screen is wide enough, based on breakpoints that we choose.

So, the layout is dynamic or responsive.

We can change any CSS dynamically, so colors, margins, padding, whatever, not just row/column. But mostly, we use it to change the layout.

You can always find out more on the MDN site. Here, they have a cool interactive demo of the order property.

I called it an incantation because, while we can certainly analyze it, in practice we just use it as is.

However, let's address your question.

• meta is a tag for, well, meta-data: data about the page as a whole. See meta.
• viewport is the area that is displayed in the browser. Think of it as a window through which we view the whole page. See viewport.
• The width is the (minimum) width of the area we see. You could set it to a particular number of pixels, but here we want to use the entire device-width.
• The initial-scale is the ratio between the device-width (in portrait mode) and the viewport. Here, we wanted 1:1.

CSS is mostly about rules like this:

    selector {
       prop: val;
    }
    p {
       color: purple;
    }

However, sometime you want to do something different: giving instructions to the CSS "engine". Those are the @-rules, and are introduced with that marker.

Two common ones are the ones you identified: fonts and media conditional rules:

@font-face {
  font-family: "MyFont";
  src: url(myfont.woff2);
}

@media (max-width: 600px) {
  p { color: red; }
}

No, as we just learned, it's like an if statement. IF the following condition applies, use these rules (which can then override earlier rules).

Wow, what an interesting question! You are right that there are lots of different screen dimensions. Still, they fall into broad categories (or they can be put in those categories).

Text can be too small to read and buttons too small to press, so at some point, we stop scaling things down and start making people scroll.

You mentioned ratio, so it's possible to media queries to have a different layout when the screen is in landscape mode versus portrait mode.

@media (orientation: landscape) {

}

In practice, we’ve stopped targeting devices and instead target constraints:

• Viewport width
• Aspect ratio
• Input modality (touch vs mouse/trackpad)
• Posture (handheld vs lap/desk)
• Attention span & task complexity

viewport width is important: tablets are bigger and more conducive to multi-column, side-by-side layouts.

Some important ideas:

use breakpoints by EM not PX:

/* instead of */
@media (min-width: 768px) { /* tablet */ }
/* use */
@media (min-width: 45rem) { /* content stops feeling cramped */ }

Thanks for that question. I learned some things!

Great!