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

Issue

Im learning @media querry and i've seen some codes with min-width and some codes with max-width. What is the difference? Wich is better for the usage in @media querry. Thx

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

Thanks in advance

Solution

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;
  }
}

Answered By - jessica-98