一,概念
Media Query:媒体查询.
CSS3中引入方式, demo:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
二, Media Type
媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
1),link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2), xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3),@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是 在<head>>/head>中的<style>...</style>中引入，单这种使用方法在 ie6-7都不被支持.
demo: @import url("css/reset.css") screen;
4), @media引入
@media screen{
选择器{
属性：属性值；
}
}
三, Media Query
Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。
常用如下:
在Media Query中如果没有明确指定Media Type，那么其默认为all.
demo:
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)"
href="style.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css"
type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
更多demo可参考: https://www.w3.org/TR/css3-mediaqueries/#media1
四,兼容性
参考: https://www.w3cplus.com/content/css3-media-queries