电话媒体查询冲突答案

【问题标题】：phone media query conflict电话媒体查询冲突
【发布时间】：2014-05-08 23:31:21
【问题描述】：

我在我的外部 css 中使用这些媒体查询：

/* Wide Mobile Layout: 480px.
   Gutters: 24px.
   Outer margins: 22px.
   Inherits styles from: Default Layout, Mobile Layout. */

@media only screen and (min-width: 480px) and (max-width: 767px) 

/* Mobile Layout: 320px.
   Gutters: 24px.
   Outer margins: 34px.
   Inherits styles from: Default Layout.
   ---------------------------------------------
   cols    1     2      3 px      68    160    252    */

@media only screen and (max-width: 767px)

当我将 max-width: 767px 更改为 (min-width: 480px) 和 (max-width: 767px) 宽度的媒体查询时，你能帮我解决这个问题吗

【问题讨论】：

这是因为两个媒体查询的最大宽度相同
@ Dipaks 我猜是这样，但是当我将 max-width 更改为 479 min-width 480 而 max width 767 不起作用

标签： css media-queries

【解决方案1】：

这是因为 CSS（层叠）中的“C”。

您在上面指定了介于 480px --> 767px 之间的规则，但在它下面您指定了任何低于 767px 的规则。

如果屏幕低于 480 像素，第二个媒体查询中的任何内容都会覆盖第一个媒体查询中指定的属性。

【讨论】：