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

在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭

[I]. 定义和规范

媒体查询包含一个可选的媒体类型和零个或多个表达式, 根据媒体特性限制样式表的作用域. 例如width, height, color等
CSS3中的媒体查询让内容的呈现可以根据设备进行变化, 而不需要改变内容本身

1.1 CSS2中的媒体查询

在CSS2中，媒体查询只使用于

1.2 CSS3中的媒体查询

在Media Queries Level 3规范中，媒体查询的能力被扩展，除了设备的类型，我们可以还获取到诸如窗口宽度、屏幕方向或分辨率等媒体特性(media features)：

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

1.3 Media Queries Level 4规范中新的媒体特性

几个有代表性的如：

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

...

[II]. 使用形式

2.1 基本语法

媒体查询最基本的形式，就是单独或组合使用媒体类型和媒体特性(后者要置于括号中)，如：

@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;
    }
}

2.2 嵌套

/*例子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;
        }
    }
}

2.3 否定式查询

可以用关键字not表示一个否定查询；not必须置于查询的一开头并会对整条查询串生效，除非逗号分割的多条

@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) {
}

[III]. 媒体特性

3.1 根据媒体特性的范围查询

指定一个固定的宽度通常是没有意义的，更多的情况下，我们需要限定的是类似“小于等于”或“大于等于”这样的范围，而大多数媒体特性可以通过添加“max-”和“min-”前缀达到上述目的

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

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

支持范围选择的特性	取值类型
aspect-ratio	诸如 1024/768 或 16:9
device-aspect-ratio	诸如 1024/768 或 16:9
color	整数
color-index	整数
width	合法宽度
height	合法高度
device-width	合法宽度
device-height	合法高度
monochrome	整数
resolution	分辨率单位(dpi, dpcm, dppx)

3.2 选项式的媒体特性查询

不同于取值连续的范围式查询，很多媒体特性只有几个固定的取值可供选择

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

选项式的媒体特性	取值选项	备注
grid	布尔值(使用时直接写成 (grid) 来判断)	是网格设备还是位图设备
hover	none, on-demand, hover	是否支持悬停状态
orientation	portrait, landscape	设备方向
light-level	dim, normal, washed	环境光
pointer	none, coarse, fine	设备交互的精度
scripting	none, initial-only, enabled	是否支持脚本
update	none, slow, normal	根据设备的更新频度区分其类型
scan	interlace, progressive	电视输出设备是顺序扫描还是隔行扫描
any-hover	none, on-demand, hover	can be used to check whether any available input mechanism allows the user to hover over elements
any-pointer	none, coarse, fine	Presence and accuracy of any pointing device available to the user
inverted-colors	none, inverted	useragent或OS是否倒置了颜色
overflow-block	none, scroll, optional-paged, paged	在block轴方向，当内容超出初始包含块或视口时，设备或浏览器的行为
overflow-inline	none, scroll	在inline轴方向，当内容超出初始包含块或视口时，设备或浏览器的行为

@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;
    }
}

[IV]. 其他

4.1 针对高分屏的媒体查询

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

4.2 引入外部文件时的媒体查询

@import url(typography.css) screen, print;

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

4.3 在style标签上的媒体查询

4.4 利用媒体查询实现图片自适应

看上去很简单，但在实际应用中，考虑到各种情况，可能会是这样：

4.5 扩展阅读：用srcset和sizes实现更好的图片自适应

• 对于固定宽度(不同设备的设计稿上尺寸相同)的图像：

• srcset属性列出了浏览器可以选择加载的源图像池，是一个由逗号分隔的列表。

• x描述符表示图像的设备像素比

• 浏览器根据运行环境，利用这些信息来选择适当的图像

• 不理解srcset的浏览器会直接加载src属性中声明的图像

• 可变宽度(根据设备有不同显示策略)的图像：基于viewport选择

• w描述符告诉浏览器列表中的每个图象的宽度

• 如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性

• sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值

• 源图尺寸值不能使用百分比

• 浏览器利用srcset和sizes信息来自动选择最符合规定条件的图像

• 无法确定究竟显示哪张图像，因为每个浏览器挑选适当图像的算法有差异

4.6 扩展阅读：用 image-set() 设置响应式的背景图片

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
        );
}

4.7 在Javascript中使用媒体查询

• 全局方法 matchMedia()，其唯一参数为一个合法的媒体查询字符串

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

  以下情况下 matches 属性会返回 false：

• 媒体查询条件不匹配

• 媒体查询字符串语法错误

• 浏览器不支持该查询特性

• 监听媒体的更改

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

4.8 在常见框架中的应用

• 在 bootstrap 中控制 .container 的宽度和内边距

  @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%;
    }
  }
  
  ...

• 在 bootstrap 中控制 grid

  @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%;
    }
    ...
  }
  ...

4.9 在chrome DevTools中模拟不同尺寸设备

调试工具打开，选中调试工具左上角的手机图标：

• 方式1：设备型号选Responsive，在同一任务栏最右侧的菜单中选择"add device pixel ratio"，在出现的菜单中选择DPR 1、2、3

• 方式2：设备型号选Edit->Add custom device，并在'Device pixel ratio' 中填入需要的值

[V]. 参考资料

• http://inspiredm.com/depth-guide-css3-media-queries/

• https://css-tricks.com/snippets/css/retina-display-media-query/

• http://www.cnblogs.com/xiaohuochai/p/5848612.html

• http://www.cnblogs.com/flicat/p/4381089.html

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

• https://www.w3schools.com/cssref/css3prmediaquery.asp

• https://swordair.com/some-parts-of-media-query-level-4/

• https://drafts.csswg.org/mediaqueries-4/

• http://www.cnblogs.com/melbourne1102/p/6505163.html

• https://segmentfault.com/a/1190000004411869

• https://isux.tencent.com/responsive-image.html

* 原创文章转载请注明出处

-------------------------------------

长按二维码关注我们的公众号哦：