CSS权威指南阅读笔记第一章04

简介: CSS权威指南阅读笔记第一章04媒体查询

媒体查询

通过媒体查询可以定义浏览器在何种媒体环境中使用指定的样式表;

媒体查询允许创作者通过媒体描述符更加指定媒体类型的特性选择样式表;

用法

  • 在link元素的media属性
  • style元素的media属性
  • @import声明的媒体描述符
  • @media声明的媒体描述符

一个样式表中可以有多个@media块,而且每个都有自己的一套媒体描述符;

媒体类型:

媒体查询包含描述媒体类型的词组和对媒体参数的说明,如分辨率和显示屏高度等,决定块中的CSS何时执行;

媒体类型就是指明不同媒体的标注:

  • all 所有媒体
  • print 打印和预览
  • projection 幻灯片
  • screen 屏幕媒体,在计算机上运行的web浏览器都是;

多个媒体类型使用逗号分割罗列。

能使用媒体类型的地方都能使用媒体查询;

媒体描述符

一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表,其中特性描述符要放到圆括号内;
一般情况,媒体特性描述符的格式类似于CSS中的一对属性和值;但是特性描述符可以不指定值;

媒体查询中的关键字
  • and 条件都满足
  • not 对整个查询取反
  • only 对不支持媒体查询的浏览器隐藏样式表

特性查询

特性查询是根据用户代理是否支持指定的CSS属性及值来应用一段样式;
使用关键字 @supports

使用@supports()可以使用纯CSS实现基本的渐进增强功能;

相关文章
|
4月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
39 0
|
4月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
38 0
|
4月前
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
54 0
|
7月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
92 2
|
7月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
71 1
|
7月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
114 1
|
7月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
57 1
|
7月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
88 1
|
7月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
67 1
|
7月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
44 0