Question

我在外部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时，媒体查询（最小宽度：480px）和（最大宽度：767px）宽度变化也会帮助我解决这个问题

Answer 1

这是因为＆＃34; C＆＃34;在CSS（级联）。

在您上方指定中间480px的规则 - ＆gt; 767px，但随后低于它你为767px以下的任何东西指定规则。

如果屏幕低于480px，则第二个媒体查询中的任何内容都将覆盖第一个媒体查询中指定的属性，但除外。

手机媒体查询冲突

1 个答案: