使用多个CSS媒体查询，但它只使用最大的一个？

Question

我运行了多个媒体查询，但它只使用最大的查询而不是正确的查询。

请参阅此处的codepen： 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;
  }
}

Answer 1

CSS媒体查询堆叠应该从最大宽度到最小宽度完成。这就是CSS代表的 - 级联样式表。

  

第2行的所有内容都会覆盖第1行的所有内容。 - 在编写CSS时以这种方式思考

意思是，您的媒体查询顺序应如下所示：

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

这样你就不需要使用!important了，因为现在混乱应该结束了。

Answer 2

我希望最大查询不是问题实际上css会从上到下呈现，所以最后它会渲染最后一个css你最大的查询是在底部，所以呈现最后的查询属性你可以洗牌和检查。

希望我的回答可以帮到你。