Why @media (max-width: Xpx)?

HTML-CSS
1

I am up to the projects on the responsive web development certification. How come it has, say, @media (max-width: 650px) when adjusting the code for different device sizes. Where do these numbers come from? Is there certain standards and where can I find those standards?

2

Hi @hughesa1 !

This line of code here

tells the computer that devices of 650px wide and smaller should adopt certain styles.
650px and less would target smaller screen sizes like phones.

Here is an example
This is telling the computer to have a background color of blue for screens 480px and less.

@media(max-width: 480px) {
  body {
    background-color: blue;
  }
}

Here is a more in depth article on media queries.

Hope that helps!

3

This is like saying, if the screen(or window of the browser) is less than 650px. We write the then part of the if-then statement in brackets.

@media (min-width: 650px) and (max-width: 800px) {
  html { background: blue; }
}

So the screen must have a minimum width of 650 pixels AND a maximum width no greater than 800 pixels in order to run the code inside of the {}'s.

4

In addition to the article I already linked, this one would be a good article to read.

5

Thanks but, why 600px and not 650px or 700px for example. Where do the numbers actually come from. I understand what media queries do, it’s just the number between the brackets I don’t understand.

6

I suggest you read through the articles I sent you (especially the second one) because it answers your question.

But what you are referring to are breakpoints.

Here are the common breakpoints mentioned in the article

  • 320px — 480px: Smaler Mobile devices
  • 481px — 768px: iPads, Tablets, larger mobile devices
  • 769px — 1024px: Small screens, laptops
  • 1025px — 1200px: Desktops, large screens
  • 1201px and more — Extra large screens, TV

There is no exact standard number to use because screen sizes are always changing. That is why you use estimates like 650px or 700px. Those numbers would affect mobile phones and smaller tablet sizes.

You could start with those numbers and then test what works in your project.

The goal is not to chase down every single device out there on the market because it is impossible.

If you are curious you can look at the breakpoints for different brands of phones, tablets, laptops and watches.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.