媒体查询#
媒体查询( Media Query )是CSS3新语法。
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询
语法规范#
css@media mediatype and|not|only(media feature){css-code;}
- 用@media开头，注意@符号
- mediatype媒体类型
- 关键字and not only
- media feature媒体特性，必须由小括号包含
关键字#
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
- and:可以将多个媒体特性连接到一起，相当于“且”的意思。
- not:排除某个媒体类型，相当于“非”的意思，可以省略。
- only:指定某个特定的媒体类型，可以省略
媒体特性#
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂了解三个，注意需加小括号包含。
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域的宽度 |
| max-width | 定义输出设备中页面最大可见区域的宽度 |
注意：为了防止混乱，媒体查询要按照从小到大或从大到小的顺序来写，但是尽量按照 从小到大 来写，使代码更简洁。