For further actions, you may consider blocking this person and/or reporting abuse
Read next
Dragging Right on Like: Navigating the Electronic Dating Jungle
Mikkelsen May -
Loyalty System: The Important Thing to Unlocking Customer Retention And Growth
Winters Lewis -
Implementing AutoML Solutions with Amazon SageMaker Autopilot
Sidra Saleem -
Mocking gRPC Clients in C#: Fake It Till You Make It
Maksim Zimin -
Top comments (4)
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 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 sweet
lemonade
, it's your family thing. Nothing wrong about it.But, as you would expect, the
size
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:
lemonade
is thewebsite
.glasses
are thedevices
.size
of eachglass
can be considered as theviewport
of eachdevice
.So, no matter which
glass
(device) you have, thelemonade
(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
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.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. :)
I'm glad I could help! 🤓
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:
See: developer.mozilla.org/en-US/docs/W...