前言：正好最近有时间，给移动端适配这里做一个整理，全面并且深入地重新去理解这些代码的含义，不再只是代码的搬运工，不再只会像之前一样复制粘贴,如果觉得对你有帮助，麻烦点个赞~~

关键词：移动端适配，@media~~......

正文：

一、基本定义

  使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二、使用方法

1.语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

2.你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

三、媒体类型--mediatype

image.png

四、媒体功能

五、举两个例子

eg1:

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

eg2:

@media screen and (min-width: 320px) and (max-width: 750px)
{
    body{
        margin:0 auto;
        width:320Px;
    }
    .left{
        margin:0 auto;
        width:320px;
        height:300px;
        background-color:#99FFCC;
    }
}

六、详细分析举例媒体属性：

[注意]媒体属性必须用括号()包起来，否则无效
1、颜色color:指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。向所有能显示颜色的设备应用样式表：

<style>
@media (color){
    .box{height: 100px;width: 100px;background: red;}    
}    
</style>
<div class="box"></div>

2、颜色索引（color-index）：颜色索引指定了输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则值等于0，向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示，说明返回值为0)：

<style>
@media (min-color-index: 256){
    .box{height: 100px; width: 100px;background: red;}    
}    
</style>    
<div class="box"></div>

3、宽高比（aspect-ratio）：宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例，向可视区域是正方形或者是宽屏的设备应用样式表：

<style>
@media (min-aspect-ratio: 1/1) {
    .box{height: 100px;width: 100px; background: red; }        
}
</style>
<div class="box"></div>

4、设备宽高比（device-aspect-ratio）：设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例，向宽高比为16:9的特殊宽屏设备应用样式表：

<style>
@media (device-aspect-ratio:16/9) {
    .box{ height: 100px;width: 100px; background: red;}        
}
</style>
<div class="box"></div>

5、设备高度（device-height）：设备高度描述了输出设备的高度，向显示在最小高度1000px的屏幕上的文档应用样式表：

<style>
@media (min-device-height: 1000px) {
    .box{ height: 100px;width: 100px; background: red;}        
}
</style>
<div class="box"></div>

6、设备宽度（device-width）：设备宽度描述了输出设备的宽度，向显示在最小宽度1000px的屏幕上的文档应用样式表：

<style>
@media (min-device-width: 1000px) {
    .box{ height: 100px; width: 100px;background: red; }        
}
</style>
<div class="box"></div>

7、网格（grid）：网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0，向非网格设备应用样式表：

<style>
@media (grid:0) {
    .box{height: 100px;width: 100px; background: red;}        
}
</style>
<div class="box"></div>

8、高度（height）：高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度，向高度大于800px的可视区域的设备应用样式表：

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background: red; }        
}
</style>
<div class="box"></div>

9、宽度（width）：宽度描述了输出设备渲染区域的宽度，向宽度大于800px的可视区域的设备应用样式表：

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background: red; }        
}
</style>
<div class="box"></div>

10、黑白（monochrome）：黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0，向非黑白设备应用样式表：

<style>
@media (monochrome:0) {
    .box{height: 100px; width: 100px; background: red;}        
}
</style>
<div class="box"></div>

11、方向（orientation）：方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式，值：landscape(横屏) | portrait(竖屏)，向竖屏设备应用样式表：

<style>
@media (monochrome:0) {
    .box{height: 100px; width: 100px; background: red;}        
}
</style>
<div class="box"></div>

12、分辨率指定输出设备的分辨率（像素密度）：分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示，向每英寸至少90点的设备应用样式：

<style>
@media (monochrome:0) {
    .box{height: 100px; width: 100px; background: red;}        
}
</style>
<div class="box"></div>

七：方法：window.matchMedia()方法

window.matchMedia()方法用来检查CSS的mediaQuery语句
[注意]IE9-浏览器不支持，可以使用第三方函数库matchMedia.js：https://github.com/paulirish/matchMedia.js/
1)属性

• window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。
• 该对象有media和matches两个属性

media：返回所查询的mediaQuery语句字符串
matches：返回一个布尔值，表示当前环境是否匹配查询语句
var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

可以根据matchMedia()方法的matches属性的不同结果，进行对应的设置

var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
  //
}else{
 //
}

[注意]如果window.matchMedia无法解析mediaQuery参数，matches属性返回的总是false，而不是报错

var result = window.matchMedia('123');
console.log(result.matches);//false

2)事件
window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法.

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);

注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数,所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数,下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色.

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
  if (mql.matches) {
    document.body.background = 'pink';
  }else{
      document.body.background = 'lightblue';
  }
}

八：打印的样式

媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等

@media print{
    *,*:before,*:after{
        background:transparent!important;
        color:#000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,a:visited{
        text-decoration: underline;
    }
    a[href]:after{
        content:"(" attr(href) ")";
    }
    abbr[title]:after{
        content:"(" attr(title) ")";
    }
    a[href^="#"]:after,a[href^="javascript:;"]:after{
        content:"";
    }
    pre,blockquote{
        border: 1px solid #999;
        /*只有opera浏览器起作用，避免在元素内部插入分页符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素内部发生分页时，最少保留3行*/
        orphans:3;
        /*元素内部发生分页时，元素顶部最少保留3行*/
        windows:3;
    }
    h2,h3{
        /*避免在元素后面插入一个分页符*/
        page-break-after:avoid;
    }
}

参考资料：深入理解CSS Media媒体查询 https://www.cnblogs.com/xiaohuochai/p/5848612.html