The Min/Max-Width Media Query Doesn't Make Grammatical Sense

The min/max-width media query doesn't make grammatical sense

min-width in media queries is not related to the min-width property you set on elements, those are two different things.

In media queries min-width: X is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-width would then be equal to screen.width <= X

To me it makes perfect sense, if you read @media screen and (max-width:420px) as a screen with a maximum width of 420px, so anything from 0 to 420px

min-width media query always fires while max-width query never fires

I don't see anything wrong with the code you've provided.

My test: https://jsfiddle.net/wp8z9aue/

<h1 id="vision">Test</h1>
#vision {
font-size: 8rem;
}

@media screen and (min-width: 600px) {
#vision {
font-size: 7rem;
}
}

Media Query CSS3 doesn't work for max-width: 420px

It sounds like you're calling a max-width:992px media query after your max-width:420px media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:

@media (max-width:992px) {
...
}

@media (max-width:420px) {
...
}

Why does a media query with a smaller min-width overwrite a larger one?

I know that 600px comes later in the CSS file which could be a reason

This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so they both have to match.

See the following related questions for more information:

  • Why does the order of media queries matter in CSS?
  • What are the rules for CSS media query overlap?
  • CSS specificity, Media Queries and min-width

but surely only one should only be applied if the screen size is either 600 or 768?

That's not true; @media rules are completely independent of one another. It doesn't make sense for @media rules to be exclusive, in particular when you consider that media queries can consist of any combination of media features.

For example, what should happen in this case when the media is (width: 600px) and (height: 300px)? (The correct behavior is that every rule is applied, with the last one taking precedence, because there is no other way for the UA to account for both width and height when evaluating the queries.)

@media {
body { background-color: white; }
}

@media (min-width: 600px) {
body { background-color: red; }
}

@media (min-width: 300px) and (max-height: 300px) {
body { background-color: yellow; }
}

@media (max-height: 600px) {
body { background-color: blue; }
}

How to combine min-width and max-width in one media query

You can combine two media queries in one, like this:

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
display: none !important;
}
}

EDIT This will hide .show-sm-only on screen smaller than (max-width) 544px and on screen bigger than (min-width) 767px.



Related Topics



Leave a reply



Submit