Explain media breakpoints like I'm five

Comments

[Christian Vasquez]

Drinking lemonade

One day, Mommy and Daddy decided that everyone in the house should only use 1 single glass to drink water, juice or anything. This would help them identify who didn't wash their glasses after using them. So, in order to recognize which glass belongs to who, they decided to buy a set of glasses that are different in size.

Daddy gets the biggest, then followed by Mommy, then your older brother and finally you get the smallest one.

Whenever your family has dinner, they really like drinking some sweet lemonade, it's your family thing. Nothing wrong about it.

But, as you would expect, the size of your glass will prevent you from taking as much lemonade as your Dad, but you can still drink it all if you want. It will just take more steps to refill it each time.

---

To clarify this example:

• The lemonade is the website.
• The glasses are the devices.
• The size of each glass can be considered as the viewport of each device.

So, no matter which glass (device) you have, the lemonade (website) will adapt to it. This is known as Responsive Web Design, which helps improve the User Experience.

Media Queries or Breakpoints is a technique used to change the way the elements of a website are displayed and organized to deliver a better experience.

You could have the regular website attributes for Desktop as the default and then create a few Media Queries or Breakpoints to then override or modify the default values with the ones that would be a better fit for a small laptop, tablet or smartphones. Each one of them will have a slightly different experience because of this.

[Michael De Abreu]

Thanks you! I think this is the best explanation posible. I really like the comparison you made, as the website should adapt to any device, no matter what, it must get the same content, even if it's not all of it.

Thanks. :)

[Christian Vasquez]

I'm glad I could help! 🤓

[Kostas Bariotis]

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...