媒体类型（Media Type）​

screen（屏幕）

print（打印）

all（全部设备）

​媒体特性条件（Media Feature）

必须用括号包裹，如 (min-width: 900px)

基本语法

1
2
3
@media 媒体类型 and (媒体特性条件) {
  /* 样式规则 */
}

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 单条件 */
/* 屏幕设备且宽度≥900px 时生效 */
@media screen and (min-width: 900px) {
  article { padding: 1rem 3rem; }
}

/* 多条件 */
/* 屏幕设备、宽度≥900px 且横屏时生效 */
@media screen and (min-width: 900px) and (orientation: landscape) {
  article { padding: 2rem; }
}

/* 等效于 @media all and (min-width: 900px) */
@media (min-width: 900px) {
  article { padding: 1rem 3rem; }
}

/* 使用 ,（逗号）表示 ​逻辑或（OR） */
/* 屏幕设备且宽度≥900px，或打印设备时生效 */
@media screen and (min-width: 900px), print {
  article { padding: 1rem 3rem; }
}