随方逐圆--全面理解CSS媒体查询

all            适合所有设备
screen         计算机屏幕（默认值）
print          打印预览模式 / 打印页  
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
braille        盲人用点字法反馈设备
aural          语音合成器

<style media="screen,tv">
.box{
   height: 100px;
   width: 100px;
   background-color: lightblue;
}    
</style>
<div class="box"></div> 

width – 输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度
height – 输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度
device-width – 输出设备的宽度（整个屏幕或页的高度，而不是仅是渲染区域）
device-height – 输出设备的高度（整个屏幕或页的高度，而不是仅是渲染区域）
orientation – 设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式
aspect-ratio – 输出设备目标显示区域的宽高比
device-aspect-ratio – 输出设备的宽高比
resolution – 输出设备的分辨率（像素密度）
color – 检查设备支持多少种颜色等
color-index – 输出设备中颜色查询表中的条目数量
monochrome – 指定了一个黑白（灰度）设备每个像素的比特数
scan – 检查电视输出设备是顺序扫描还是隔行扫描
grid – 判断输出设备是网格设备还是位图设备

update – 根据设备的更新频度区分其类型 (none 如打印机, slow 如电子墨水, fast 正常设备)
scripting – none 不支持脚本或未启用 | initial-only 仅支持页面初始化脚本 | enabled 支持脚本并且已启用
pointer – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, none 无指点)
hover – 设备是否支持悬停状态...

@media screen {
   body {
       font-size: 20px;
   }
}@media screen, print {
   body {
       font-size: 20px;
   }
}@media (width: 30em) {
   nav li {
       display: block;
   }
}@media screen and (width: 30em) {
   nav li {
       display: block;
   }
}

/*例子1:媒体类型套媒体特性*/
@media screen {
   @media (min-width: 20em) {
       img {
           display: block;
           width: 100%;
           height: auto;
       }
   }
   @media (min-width: 40em) {
       img {
           display: inline-block;
           max-width: 300px;
       }
   }
}/*例子2:媒体特性多层嵌套*/
@media (hover: on-demand) {
   @media (pointer: coarse) {
       input[type=checkbox] ~ label {
           padding: .5em;
       }
   }
   @media (pointer: fine) {
       input[type=checkbox] ~ label {
           padding: .1em;
       }
   }
}

@media not print {
   body {
       background: url('paisley.png');
   }
}/*否定`print and (min-resolution: 1.5dppx)`这一整个条件*/
@media not print and (min-resolution: 1.5dppx) {
   .external {
       background: url('arrow-lowres.png');
   }
}/* not A 或 not B */
@media not (hover: hover), not (pointer: coarse) {
   font-size: 20px;
}

/*非法：not不在最前面*/
@media not print and not (min-resolution: 2dppx) {
}/*非法：not不在最前面*/
@media screen and not (min-resolution: 2dppx) {
}

/*0 至 30em*/
@media (max-width: 30em) {
   nav li {
       display: block;
   }
}/*30em 至 100em*/
@media (min-width: 30em) and (max-width: 100em)  {
   nav li {
       display: block;
   }
}

@media screen and (orientation: portrait) {
   #logo {
       height: 10vh;
       width: auto;
   }
}

@media screen and (hover: on-demand) {
   input[type=checkbox] + label {
       padding: .5em;
   }
}@media screen and (hover: none) and (pointer: coarse) {
   input[type=checkbox] + label {
       padding: .5em;
   }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   /* Retina屏幕下的样式 */
}

@import url(typography.css) screen, print;@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min-resolution: 96dpi);

<!--即使媒体查询不符，样式文件总会被下载-->
<link rel="stylesheet" href="styles.css"
   type="text/css" media="screen and (max-width: 480px)">

<style type="text/css" media="screen and (max-width: 480px)">
   body {
       font-size: 20px;
   }
</style>

<picture>
   <source srcset="large.jpg" media="(min-width: 1024px)">
   <source srcset="medium.jpg" media="(min-width: 680px)">
   
   <!-- fallback -->
   <img src="small.jpg" alt="">
</picture>

<picture>
 <source src="large.jpg"
         media="( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
                ( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or
                ( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) )" />
 <source src="medium.jpg"
         media="( (max-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
                ( (max-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) or
                ( (min-device-pixel-ratio: 1.5) and (min-width: 10.001em) )" />
 <source src="small.jpg" /> <!-- fallback -->
 <img src="small.jpg" alt="" />
</picture>

body {
   /*
   为普通屏幕使用 pic-1.jpg，
   为高分屏使用 pic-2.jpg，
   如果更高的分辨率则使用 pic-3.jpg，比如印刷
   */
   background-image:
       image-set(
           url(../images/pic-1.jpg) 1x,
           url(../images/pic-2.jpg) 2x,
           url(../images/pic-3.jpg) 600dpi
       );
}

var isWideScreen = matchMedia("(min-width: 960px)"); 
console.log(isWideScreen.matches); //是否匹配 true | false
console.log(isWideScreen.media); //"(min-width: 960px)"

function toggleClass(mq) {
    if (mq.matches) {
        document.body.classList.add('widescreen');
    } else {
        document.body.classList.remove('widescreen');
    }
}
//添加监听
isWideScreen.addListener( toggleClass );
//撤销监听
isWideScreen.removeListener( toggleClass );

@media (min-width: 1200px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 576px) {
  .container {
    width: 540px;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    width: 720px;
    max-width: 100%;
  }
}

...

@media (min-width: 768px) {
  .col-md-1 {
    max-width: 8.333333%;
  }
  .col-md-2 {
    max-width: 16.666667%;
  }
  .col-md-3 {
    max-width: 25%;
  }
  .col-md-4 {
    max-width: 33.333333%;
  }
  .col-md-5 {
    max-width: 41.666667%;
  }
  ...
}
...