本知识学习用时: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的前端一万小时” 所有,转载需说明来源)
领取专属 10元无门槛券
私享最新 技术干货