css媒体查询可以让我们根据设备显示器的特性为其设定css样式，媒体查询包含了一个媒体类型和至少使用一个诸如宽度、高度、颜色媒体属性来限制样式表范围（一个或多个检测媒体特性的条件表达式）的表达式，例如可以使用几行代码，就可以根据视口宽度、屏幕比例、设备方向（横向或纵向）等特性来改变页面内容的显示方式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
媒体查询的使用方法
1、<head>标签中插入link标签
<link rel="stylesheet" media="screen" type="text/css" href=""> 对显示屏应用该样式
<link rel="stylesheet" media="screen and (orientation:portrait)" type="text/css" href=""> 对纵向放置的显示屏使用该样式
<link rel="stylesheet" media="not screen and (orientation:portrait)" type="text/css" href=""> 对非纵向放置的显示屏使用该样式
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-800px),projection" type="text/css" href=""> 对视口宽度大于800像素且纵向放置的显示屏使用该样式并且样式应用于所有的投影仪
2、在css样式中使用媒体查询
@media screen and (max-device-400px){
h1{color:red;}
}
在屏幕宽度小于等于400像素时，h1元素的颜色为红色
3、使用css的@import指令在当前样式表中安条件引入其他样式表
@import url("phone.css") screen and (max-360px)
使用@import方式会增加http请求（这会影响加载速度）
以下为可供媒体查询检测的特性
- 视口宽度
- height:视口高度
- device-设备屏幕的宽度
- device-height:设备屏幕的高度
- orientation:检测设备处于横向还是纵向
- aspect-radio:基于视口宽度和高度的宽高比
- device-sapect-radio:基于设备渲染平面宽度和高度的宽高比
- color:每种颜色的位数
- color-index:设备的颜色索引表中的颜色数
- monochrome:检测单色帧缓冲区中每像素所使用的位数
- resolution:用来检测屏幕或打印机的分辨率，
- scan:电视机的烧苗方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)
- 用来检测输出设备是网格设备还是位图设备