What's the difference between min-width and max-width?

Question

I'm learning @media query and I've seen some codes with min-width and some codes with max-width.

What is the difference?

Which is better for the usage in @media query.

Thanks

I've tried both (min-width and max-width) but I was unable to see a difference.

Thanks in advance

"Which is better" is opinion based. I would say in general you style mobile first, so `min-width` would be used for higher screen width, it's probably used more often. — Cédric, Nov 08 '22 at 09:00

score 0 · Accepted Answer · answered Nov 08 '22 at 08:56

Let's say you want the background-color of the body tag to be black for screen sizes smaller than 800px, you need to use max-width, which means only apply these styles if the width of the screen is not bigger than 800px(the maximum width is 800px).

@media only screen and (max-width: 800px) {
  body {
    background-color: black;
  }
}

but if you want a style to be applied for screen sizes which are at least 800px wide(bigger than 800px), you should use min-width instead.

@media only screen and (min-width: 800px) {
  body {
    background-color: red;
  }
}

score 0 · Answer 2 · answered Nov 08 '22 at 08:56

@media only screen and (min-width: 600px) {...}
What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”

@media only screen and (max-width: 600px) {...}
What this query really means, is “If [device width] is lesser than or equal to 600px, then do {…}”

@media only screen and (max-width: 600px) and (min-width: 400px) {...}

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

Thank you very much for this explenation Bahubali. – GloryToPeePo Nov 08 '22 at 08:59 — GloryToPeePo, Nov 08 '22 at 08:59

What's the difference between min-width and max-width?

2 Answers2