DEV Community

Discussion on: Explain media breakpoints like I'm five

Collapse
 
chrisvasqm profile image
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.

Collapse
 
michaeljota profile image
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. :)

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

I'm glad I could help! 🤓