<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="web.css">
<link media="(max-width: 750px)" rel="stylesheet" href="mobile.css">

屏幕快照 2018-04-24 下午1.22.21.png

CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。通过查询视口宽度，我们可以实现如下功能：站点默认为两列式布局，如果屏幕（适口）宽度超过40em，则变成三列式布局。

1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询结构

@media only screen and (min-width:40em) {
         body { background-color:blue;}
}

2.1 @media

以@media开头来表示这是一条媒体查询语句。

2.2 screen

紧跟在@media后面的是一个或者多个表达式，可以判别为真或假。在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式：@media only screen。与媒体类型相对应的有：print（打印机）、braille（盲文）或者all（全部）等其他类型。

2.3 and

and是一个关键字，表示有多个表达式，screen是第一个表达式，and后为另一个表达式。需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思）。与and相对应的关键字有：or、not等。

2.4 (min-width:40em)

and之后的(min-width:40em)为第二个表达式（表达式在小括号内），所有的表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（如：screen、print等）。
前缀min-表示“至少”，即“大于等于”的意思。
前缀max-表示“至多”，即“小于等于”的意思。

2.5 ｛｝

花括号里面的内容表示整条媒体查询结果为真时的CSS 样式。

在使用媒体查询时，不要把所有样式都放入媒体查询中。正确做法是先声明适用于所有视口宽度的非媒体查询样式，然后只是用媒体查询去覆盖掉在特定宽度中用到的样式。

body {
        background-color:green;
}
@media only screen and (min-width:40em) {
        body {background-color:blue;}
}

3、在样式表链接中使用媒体查询

<link rel="stylesheet" href="styles/mainstyles.css">
<link rel="stylesheet" href="styles/widerscreen.css"
media="only and (min-width:40em)">

<link rel="stylesheet" href="styles/mainstyles.css">此样式表表示应用于所有设备，<link rel="stylesheet" href="styles/widerscreen.css" media="only and (min-width:40em)">表示仅在查询结果为真（视口宽度大于等于40em）时应用的设备。

4、媒体特性

媒体查询可以查询许多媒体特性，如：视口宽度和高度、屏幕宽度和高度、方向、宽高比和分辨率（屏幕上每个维度上的像素个数）等。
其中大多数都可以加上min-或max-前缀。

4.1 视口宽度和高度（媒体查询中最常用到的设备属性）

视口宽度：width
视口高度：height
视口指的是浏览器窗口中实际包含网页的那部分区域。浏览器窗口减去页面边上的滚动条，以及顶部或底部的工具栏和菜单，剩下的区域就是视口。

4.2 屏幕宽度与高度

屏幕宽度：device-width
屏幕高度：device-height

@media only screen and (max-device-width:40em) {...}

4.3 方向

方向：orientation
值为：横排方向（ landscape）竖排方向（portrait）

@media only screen and (orientation:landscape) {...}

4.4 宽高比

视口宽高比：aspect-ratio
设备屏幕宽高比：device-aspect-ratio

常见的显示器宽高比时16:9（如19201080或1366768像素）或者是16:10（1280800）。iphone 3和iphone 4s是3:2（480320和960640），而iPhone 5则是16:9（1136640）。安卓手机通常是4:3、3:2、16:10或16:9。

@media only screen and (min-device-aspect-ratio:16/9) {...}

4.5 分辨率

设备屏幕的分辨率：resolution

@media only screen and (resolution:3oodpi) {...}

4.6其他媒体特性

color
color-index
monochrome
scan
grid

5、浏览器支持

需要担心的浏览器是IE8及其更早版本。
当需要在IE8及其更早版本中使用媒体查询时，我们可以使用条件注释使代码仅针对Internet Explorer。
条件注释也是一种查询，出现在HTML 中，而不是CSS中。
为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：

<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->

js如何使用媒体查询

在利用媒体查询进行响应式布局开发时，用 js 写了一个动画，但不想让它在小屏幕上显示，这就要对屏幕尺寸进行筛选，那么在 js 中是如何使用媒体查询的呢？

    var result1 = window.matchMedia('(min-width:1200px)');
    var result2 = window.matchMedia('(min-width:992px)');
    var result3 = window.matchMedia('(min-width:768px)');
      if(result1.matches) {
            console.log("大屏幕(>=1200)");
        }else if(result2.matches){
            console.log("中等屏幕(>=992&<=1200)");
        }else if(result3.matches){
            console.log("小屏幕(>=768&<=992)");
        }else{
            console.log("超小屏幕(<=768)");
        }

请问怎样才能同时监听是否满足最大和最小值？
根据 mdn 测试媒体查询的说法应该是没有'(min-width: 380px) and (max-width: 760px)'，这种写法的
你可以试试这样

window.matchMedia("(min-width: 380px)").matches && window.matchMedia('(max-width: 760px)').matches

Media query 媒体查询