Drinking lemonade

One day, Mommy and Daddy decided that everyone in the house should only use 1 singleglass to drink water, juice or anything. This would help them identify who didn't wash theirglasses after using them. So, in order to recognize whichglass belongs to who, they decided to buy a set ofglasses that are different insize.

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 sweetlemonade, it's your family thing. Nothing wrong about it.

But, as you would expect, thesize of yourglass 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:

• Thelemonade is thewebsite.
• Theglasses are thedevices.
• Thesize of eachglass can be considered as theviewport of eachdevice.

So, no matter whichglass (device) you have, thelemonade (website) will adapt to it. This is known asResponsive Web Design, which helps improve theUser 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 thenoverride ormodify 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.

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 differentfont-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:

//Alldeviceswillgetthisrule.paragraph{font-size:16px;}@media(max-width:767px){//Butdeviceswithaviewportnotwiderthan767pxwillalsogotthisrule.paragraph{font-size:14px;}}

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