Using multiple CSS media queries, but it's only using the largest one?

问题

I have multiple media queries running, however it is only using the largest query as opposed to the one that is correct.

See codepen here: http://codepen.io/Not_A_Fax_Machine/pen/wdyjWO

@media (max-height: 346px) {
  li.sidebar-list {
    max-height: 69px !important;
  }
}
@media (max-height: 480px) {
  li.sidebar-list {
    max-height: 96px !important;
  }
}

回答1:

CSS media query stacking should be done from the biggest width down to the lowest width. This is what CSS stands for - cascading style sheets.

Everything on line 2 overrides everything on line 1. - think about it this way when writing CSS

Meaning, your media query order should be as follows:

@media (max-height: 480px) {
    li.sidebar-list {
        max-height: 96px;
    }
@media (max-height: 346px) {
    li.sidebar-list {
        max-height: 69px;
    }
}

And this way you won't need to use !important, because the confusion should be over by now.

回答2:

I hope that's not a problem with largest query actually css will render top to bottom, so finally it will render last css your largest query is there at bottom so rendering last query properties you can shuffle and check.

hope my answer help you.

来源：https://stackoverflow.com/questions/43999830/using-multiple-css-media-queries-but-its-only-using-the-largest-one