让这些“展示”有更好的扩展性——媒体查询

本知识学习用时：1小时，总第71/10000小时

前言：实际上在很早之前，CSS 就支持媒体查询了：例如，页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用 media 使某些 style 只在打印的时候生效。

而 CSS3 的 Media Queries 的到来，可以让我们针对不同的设备场景使用不同的 CSS。

一、常用的媒体类型

1. all（所有），适用于所有设备。

2. handheld（手持），用于手持设备。

3. print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。

4. projection（投影），用于投影演示文稿，例如投影仪。

5. screen（屏幕） ，主要用于计算机屏幕。

在使用的时候可以在样式表直接书写 @media 指令+空格+媒体类型（多个逗号隔开）：

二、CSS3 里的媒体查询

CSS2 的媒体类型应用场景极为有限，CSS3 大大拓展了这一能力。

另外，

三、常用的 media 属性

width：浏览器宽度

height：浏览器高度

device-width：设备屏幕分辨率的宽度值

device-height：设备屏幕分辨率的高度值

orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为 portrait，否则为landscape

aspect-ratio：比例值，浏览器的纵横比

device-aspect-ratio：比例值，屏幕的纵横比

color：设备使用多少位的颜色值，如果不是彩色设备，值为0

color-index：色彩表的色彩数

monochrome：单色帧缓冲器每个像素的字节

resolution：分辨率值，设备分辨率值

scan：电视机类型设备扫描方式，progressive或interlace

grid：只能指定两个值0或1，是否基于栅格的设备

四、如何引入 media

有两种常用的引入方式：

① link 方法引入

② @media 引入（这个最常用）:

⚠️注意：一般我们都是写完一个样式之后，再写它对应的媒体查询，而且要注意选择器的权重。

后记：本篇知识点不多，但每个页面又基本上都会用，所以理解的基础上根据实际选择即可。

欢迎继续关注下文 ：

（17）番外篇——① 浏览器兼容

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）