CSS3媒体查询Media Queries基础学习教程


Posted in HTML / CSS onFebruary 29, 2016

语法

媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。

CSS Code复制内容到剪贴板
  1. <!-- link元素中的CSS媒体查询 -->   
  2. <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />   
  3.   
  4. <!-- 样式表中的CSS媒体查询 -->   
  5. <style>   
  6. @media (max-width600px) {   
  7.   .facet_sidebar {   
  8.     displaynone;   
  9.   }   
  10. }   
  11. </style>  

当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用)。

在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all 。

逻辑操作符

操作符 not,and 和 only 可以用来构建复杂的媒体查询。
and 操作符用来把多个 媒体属性 组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符,必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。

and

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,即一个媒体属性与默认指定的 all媒体类型,可能像这样子:

CSS Code复制内容到剪贴板
  1. @media (min-width700px) { ... }  

如果你只想在横屏时应用这个,你可以使用 and 操作符合并媒体属性:

CSS Code复制内容到剪贴板
  1. (min-width700px) and (orientation: landscape) { ... }  

现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果,你仅想再电视媒体上应用,你可以使用 and 操作符合并媒体属性:

CSS Code复制内容到剪贴板
  1. @media tv and (min-width700px) and (orientation: landscape) { ... }  

现在,上面媒体查询仅在电视媒体上,可视区域不小于700像素宽度并且是横屏时有效。

逗号分隔列表

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如,如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式,你可以这样写:

CSS Code复制内容到剪贴板
  1. @media (min-width700px), handheld and (orientation: landscape) { ... }  

如上文,如果是一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,not 在下面的查询中最后被计算:

CSS Code复制内容到剪贴板
  1. @media not all and (monochrome) { ... }  

等价于:

CSS Code复制内容到剪贴板
  1. @media not (all and (monochrome)) { ... }  

而不是:

CSS Code复制内容到剪贴板
  1. @media (not all) and (monochrome) { ... }  

另一个例子,看下面的媒体查询:

CSS Code复制内容到剪贴板
  1. @media not screen and (color), print and (color)  

等价于:

CSS Code复制内容到剪贴板
  1. @media (not (screen and (color))), print and (color)  

only

only 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式:

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="only screen and (color)" href="example.css" />  

伪范式

CSS Code复制内容到剪贴板
  1. media_query_list: <media_query> [, <media_query> ]*   
  2. media_query: [[only | not]? <media_type> [ and <expression> ]*]   
  3.   | <expression> [ and <expression> ]*   
  4. expression: ( <media_feature> [: <value>]? )   
  5. media_type: all | aural | braille | handheld | print |   
  6.   projection | screen | tty | tv | embossed  
  7. media_feature: width | min-width | max-width  
  8.   | height | min-height | max-height  
  9.   | device-width | min-device-width | max-device-width  
  10.   | device-height | min-device-height | max-device-height  
  11.   | aspect-ratio | min-aspect-ratio | max-aspect-ratio   
  12.   | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio   
  13.   | color | min-color | max-color  
  14.   | color-index | min-color-index | max-color-index   
  15.   | monochrome | min-monochrome | max-monochrome   
  16.   | resolution | min-resolution | max-resolution   
  17.   | scan | grid  

媒体查询是大小写不敏感的。包含未知媒体类型的查询通常返回假。

注意: 表达式需要用圆括号。没有使用的会引起错误。

媒体查询可检测的特性
width:视口宽度
height:视口高度
device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)
device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)
orientation:检查设备处于横向还是纵向
aspect-ratio:基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样定义 aspect-ratio: 16/9
device-aspect-ratio:和 aspect-ratio 类似,基于设备渲染平面宽度和高度的宽高比
color:每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。
color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如
monochrome: 2
resolution:用来检测屏幕或打印机的分辨率,如 min-resolution: 300dpi。还可以接受每厘米像素点数的度量值,如 min-resolution: 118dpcm。
scan:电视机的扫描方式,值可设为 progressive(逐行扫描)或 interlace(隔行扫描)。如 720p HD 电视(720p 的 p 即表明是逐行扫描)匹配 scan: progressive,而 1080i HD 电视(1080i 中的 i 表明是隔行扫描)匹配 scan: interlace。
grid:用来检测输出设备是网格设备还是位图设备。
除 scan 和 grid 之外,都可使用 min 和 max 前缀来创建一个查询范围,如min-width:200px、max-width:360px。

利用viewport禁止用户缩放

CSS Code复制内容到剪贴板
  1. <meta name="viewport" content="width=device-width,initial-scale=1.0" />  

meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。

注意:关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”, 是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。 当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。

HTML / CSS 相关文章推荐
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
显示程序执行时间php函数代码
2013/08/29 PHP
dedecms中使用php语句指南
2014/11/13 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python新手入门最容易犯的错误总结
2017/04/24 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python的继承知识点总结
2018/12/10 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
歌颂祖国演讲稿
2014/05/04 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书