Should media query rules coincide at the breaking point or not?-CodePudding

Recently, I find myself doing CSS in a way that I really like. Not mobile first, not desktop first. I just go and do:

Generic properties
Add stuff for different screen sizes with breakpoints that make that specific design look good

So I will do something like:

.polaroid-cards {
    display: grid;
}

/* Up until 860px */
@media (max-width: 860px) {

    .polaroid-cards {
        grid-template-columns: 1fr;
        padding: 3rem;
    }

}

/* From 860px on */
@media (min-width: 860px) {

    .polaroid-cards {
        grid-template-columns: 1fr 1fr;
        padding: 3rem 15%;
    }

}

And those rules are specific for that component. Other components may break at lower sizes or break three times, whatever is needed to make them look good.

Yeah well that was to give some context.

But the question I have is, regarding:

@media (max-width: 860px) { ...
@media (min-width: 860px) { ...

Is that okay?

Should it be?

@media (max-width: 859px) { ...
@media (min-width: 860px) { ...

I of course tested both versions and both work fine (apparently), but I want to understand the math behind this, and what internal rules the browser is applying, so I "help the browser" or at least don't cause unexpected bugs.

CodePudding user response：

min- and max-width are both inclusive, i.e. min-width: 860px means any screen that is 860px wide or wider. This means that

@media (max-width: 860px) { ...
@media (min-width: 860px) { ...

do overlap and the usual css precedence rules determine which to choose at a screen of width 860px exactly. So if you want to be absolutely, totally sure which rule will apply when, one should use 859px (or 861px).

Luckily, the Media Queries Level 4 spec, which is beginning to roll out to browsers, enables using regular comparison operators, making this cleaner and more obvious. You can then write

@media (width < 860px) { ...
@media (width >= 860px) { ...

And for three breakpoints, you can even do

@media (width < 860px) { ...
@media (860 <= width < 1080) { ...
@media (width >= 1080) { ...

CodePudding user response：

When CSS media queries overlap, they follow the cascade rule, so in the example you shared (with some addition):

@media (max-width: 860px) { div { color: red; } }
@media (min-width: 860px) { div { color: green; } }

If the viewport is exactly 860px, both media queries will return true, which will be the equivalent of:

{ div { color: red; } }
{ div { color: green; } }

I which case, the second rule takes over

CodePudding user response：

You should give 1px difference.

If you inspect the square below at 1024px, you can see that the green background overrides the red one but only because it's written after the red background, both rules are applied.

But if you check the border, only the orange one is applyed for a width >=1024px.

div{
  width:50px;
  height:50px;
}

@media (max-width: 1023px) {
  div{
    border:5px solid blue;
  }
}
@media (max-width: 1024px) {
  div{
    background-color:red;
  }
}
@media (min-width: 1024px) {
  div{
    background-color:green;
    border:5px solid orange;
  }
}

<div></div>

Also, a good way to set your media queries is to use the default css for the smallest size and set media rules with min-width like the example below :

div{    
  width:50px;
  height:50px;
  
  background-color:blue;
}
@media (min-width: 1024px) {
  div{
    background-color:orange;
  }
}
@media (min-width: 1920px) {
  div{
    background-color:red;
  }
}

<div></div>