详解CSS3 Media Queries中媒体属性的使用


Posted in HTML / CSS onFebruary 29, 2016

媒体属性
大多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。

注意:如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。例如,在语音合成器上查询屏幕长宽比总是返回假。
颜色(color)

值: <color>
媒体: visual
是否接受 min/max 前缀:是

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0。

注意:如果每个颜色单元具有不同数量的比特值,则使用最小的。例如,如果显示器为蓝色和红色提供5比特,而为绿色提供6比特,则认为每个颜色单元有5比特。如果设备使用索引颜色,则使用颜色表中颜色单元的最小比特数。
示例

向所有能显示颜色的设备应用样式表:

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

向每个颜色单元至少有4个比特的设备应用样式表:

CSS Code复制内容到剪贴板
  1. @media all and (min-color: 4) { ... }  

颜色索引(color-index)

值:<integer>
媒体: visual
是否接受 min/max 前缀:是

指定了输出设备中颜色查询表中的条目数量。

示例

向所有使用索引颜色的设备应用样式表,你可以这么做:

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

向所有使用至少256个索引颜色的设备应用样式表:

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />  

宽高比(aspect-ratio)

值:<ratio>
媒体: visual, tactile
是否接受 min/max 前缀:是

描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

示例

下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。

CSS Code复制内容到剪贴板
  1. @media screen and (min-aspect-ratio: 1/1) { ... }  

这指定了宽高比或者1:1或者更大。换句话说,可视区域或者是正方形或者是宽屏。

设备宽高比(device-aspect-ratio)

值:<ratio>
媒体:visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

示例

下面为宽屏设备选择了一个特殊的样式表。

CSS Code复制内容到剪贴板
  1. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }  

宽高比或者16:9或者16:10。

设备高度(device-height)

值:<length>
媒体:visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的高度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

示例

向显示在最大宽度800px的屏幕上的文档应用样式表,你可以这样做:

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-device-width: 799px)" />  

设备宽度(device-width)

值:<length>
媒体: visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的宽度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

网格(grid)

值:<integer>
媒体:all
是否接受 min/max 前缀: 否

判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

示例

向一个15字符宽度或更窄的手持设备应用样式:

CSS Code复制内容到剪贴板
  1. @media handheld and (grid) and (max-width: 15em) { ... }  

注意:“em” 在网格设备中有不同的意义;一个“em”的实际宽度不得而知,假设1em相当于一个网格单元的宽高。
高度(height)

值:<length>
媒体:visual, tactile
是否接受 min/max 前缀:是

height 媒体属性描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度。

注意:用户调整窗口大小后,火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
黑白(monochrome)

值:<integer>
媒体: visual
是否接受 min/max 前缀:是

指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0。

示例

向所有黑白设备应用样式表:

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

向每个像素至少8比特的黑白设备应用样式表:

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

方向(orientation)

值:landscape | portrait
媒体:visual
是否接受 min/max 前缀:否

指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式。

示例

向竖屏设备应用样式表:

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

分辨率(resolution)

值: <resolution>
媒体: bitmap
是否接受 min/max 前缀:是

指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

示例

为每英寸至多300点的打印机应用样式:

CSS Code复制内容到剪贴板
  1. @media print and (min-resolution: 300dpi) { ... }  

替换老旧的 (min-device-pixel-ratio: 2) 语法:

CSS Code复制内容到剪贴板
  1. @media screen and (min-resolution: 2dppx) { ... }  

扫描(scan)

值: progressive | interlace
媒体:tv
是否接受 min/max 前缀:否

描述了电视输出设备的扫描过程。

示例

向以顺序方式扫描的电视机上应用样式表:

CSS Code复制内容到剪贴板
  1. @media tv and (scan: progressive) { ... }  

宽度(width)

值: <length>
媒体: visual, tactile
是否接受 min/max 前缀:是

width 媒体属性描述了输出设备渲染区域(如可视区域的宽度或打印机纸盒的宽度)的宽度。

注意:用户调整窗口大小后,火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
示例

如果你想向最小宽度20em的手持设备或屏幕应用样式表,你可以使用这样的查询:

CSS Code复制内容到剪贴板
  1. @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }  

这个媒体查询将向最小宽度8.5英寸的打印机应用样式表:

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="print and (min-width: 8.5in)"  
  2.     href="http://foo.com/mystyle.css" />  

这个查询适用于宽度在500px和800px之间的屏幕:

CSS Code复制内容到剪贴板
  1. @media screen and (min-width500px) and (max-width800px) { ... }  

实现响应式设计

这个例子可以调整你的浏览器窗口尺寸,我们来具体看一下:
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。

CSS Code复制内容到剪贴板
  1. @media screen and (max-width600px) {   
  2.   .class {   
  3.     background#ccc;   
  4.   }   
  5. }  

如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />  

Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。

CSS Code复制内容到剪贴板
  1. @media screen and (min-width900px) {   
  2.   .class {   
  3.     background#666;   
  4.   }   
  5. }  

Multiple Media Queries
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

CSS Code复制内容到剪贴板
  1. @media screen and (min-width600px) and (max-width900px) {   
  2.   .class {   
  3.     background#333;   
  4.   }   
  5. }  

Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

CSS Code复制内容到剪贴板
  1. @media screen and (max-device-width480px) {   
  2.   .class {   
  3.     background#000;   
  4.   }   
  5. }   

For iPhone 4
下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />   

For iPad
你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) 

CSS Code复制内容到剪贴板

  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   
  2. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   
HTML / CSS 相关文章推荐
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #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
You might like
一个很不错的PHP翻页类
2009/06/01 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php session 写入数据库
2016/02/13 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
最新自我评价范文
2013/11/16 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
大班上学期个人总结
2015/02/13 职场文书
学校会议通知范文
2015/04/15 职场文书
女方离婚起诉书
2015/05/18 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
初中语文教学研修日志
2015/11/13 职场文书