Discussion on: Explain media breakpoints like I'm five

In the context of CSS, media breakpoints (or queries) is what allows us to instruct the browser to apply different styles depending on the device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).

With this in mind, you can set a different font-size attribute to a class when the stylesheet is applied to computer's screen and a different when is being printed.

Now, AFAIC, the media queries first appeared when first started to appear lots of lots different devices (mobiles, tablets, etc) and the regular, designed for normal screens, websites couldn't be viewed correctly on mobile devices. Thus also the term responsive design came up where we would design different layouts for a big screen and a different one for a mobile device. We needed media queries to implement those responsive designs.

An example:

// All devices will get this rule
.paragraph {
  font-size: 16px;
}

@media (max-width: 767px) {
  // But devices with a viewport not wider than 767px will also got this rule
  .paragraph {
    font-size: 14px;
  }
}

See: developer.mozilla.org/en-US/docs/W...