1.用途
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的
- 注意：重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
2.用法
@media screen and (min-width: 480px) {
body {
background-color: yellow;
}
}
/*屏幕宽度为480px以上时body的背景色为黄色*/
（1）写在style标签或CSS文件中
（2）直接在link中判断设备的尺寸，然后引用不同的CSS文件
/* 当屏幕的宽度大于等于400px的时候，应用 A.css */
<link rel="stylesheet" type="text/css"
href="A.css" media="screen and (min-width: 400px)">
3.常用媒体类型
- all：用于所有多媒体类型设备
- print：用于打印机
- screen：用于电脑屏幕，平板，智能手机等
- speech：用于屏幕阅读器
3.常用特性
- width：定义输出设备中的页面可见区域宽度
- height：定义输出设备中的页面可见区域高度
- max-width：定义输出设备中的页面最大可见区域宽度
- max-height：定义输出设备中的页面最大可见区域高度
- max-device-width：定义输出设备的屏幕最大可见宽度
- max-device-height：定义输出设备的屏幕可见的最大高度
- orientation：检测设备目前处于横向（值为landscape）还是纵向（值为portrait）状态
- aspect-ratio：检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
- device-aspect-ratio：检测设备的宽度和高度的比例
- color：检测颜色的位数（例如：min-color: 32就会检测设备是否拥有32位颜色）
