媒体查询
通过媒体查询可以定义浏览器在何种媒体环境中使用指定的样式表;
媒体查询允许创作者通过媒体描述符更加指定媒体类型的特性选择样式表;
用法
- 在link元素的media属性
- style元素的media属性
- @import声明的媒体描述符
- @media声明的媒体描述符
一个样式表中可以有多个@media块,而且每个都有自己的一套媒体描述符;
媒体类型:
媒体查询包含描述媒体类型的词组和对媒体参数的说明,如分辨率和显示屏高度等,决定块中的CSS何时执行;
媒体类型就是指明不同媒体的标注:
- all 所有媒体
- print 打印和预览
- projection 幻灯片
- screen 屏幕媒体,在计算机上运行的web浏览器都是;
多个媒体类型使用逗号分割罗列。
能使用媒体类型的地方都能使用媒体查询;
媒体描述符
一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表,其中特性描述符要放到圆括号内;
一般情况,媒体特性描述符的格式类似于CSS中的一对属性和值;但是特性描述符可以不指定值;
媒体查询中的关键字
- and 条件都满足
- not 对整个查询取反
- only 对不支持媒体查询的浏览器隐藏样式表
特性查询
特性查询是根据用户代理是否支持指定的CSS属性及值来应用一段样式;
使用关键字 @supports
使用@supports()可以使用纯CSS实现基本的渐进增强功能;