css 媒体查询

发表于 更新于 分类于 本文字数： 138 阅读时长 ≈ 1 分钟

css 媒体查询

在写媒体查询的时候，顺序很重要。

  • min 相关的，必须从上到下的值依次递增。
  • max 相关的，必须从上到下的值依次递减。

原因：相同的权重，最后一条被选中。比如现在宽度 750px，能匹配到第一条和第三条，最小值 700px–最大值 800px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen and (min-width: 700px) { /* 依次递增 */
  div.example {
	color: yellow;
  }
}
@media screen and (min-width: 800px) {
  div.example {
	color: white;
  }
}

@media screen and (max-width: 800px) { /* 依次递减 */
  div.example {
    background-color: green;
  }
}
@media screen and (max-width: 700px) {
  div.example {
	background-color: pink;
  }
}