一说到响应式设计,肯定离不开媒体查询 media。一般认为媒体查询是 CSS3 的新增内容,实际上 CSS2 已经存在了,CSS3 新增了媒体属性和使用场景 (IE8 - 浏览器不支持)。本文将详细介绍媒体查询的内容
在 CSS2 中,媒体查询只使用于 <style> 和 <link> 标签中,以 media 属性存在
media 属性用于为不同的媒介类型规定不同的样式
- screen计算机屏幕(默认值)tty电传打字机以及使用等宽字符网格的类似媒介tv电视类型设备(低分辨率、有限的屏幕翻滚能力)projection放映机handheld手持设备(小屏幕、有限的带宽)print打印预览模式 / 打印页braille盲人用点字法反馈设备aural语音合成器all适合所有设备
真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'
- <style media="screen">
- .box{height: 100px;width: 100px; background-color: lightblue;}
- </style>
- <div class="box">
- </div>
媒体属性是 CSS3 新增的内容,多数媒体属性带有 "min-" 和 "max-" 前缀,用于表达 "小于等于" 和 "大于等于"。这避免了使用与 html 和 XML 冲突的 "<"和">" 字符
[注意]媒体属性必须用括号 () 包起来,否则无效
下表中列出了所有的媒体属性
- width | min - width | max - width height | min - height | max - height device - width | min - device - width | max - device - width device - height | min - device - height | max - device - height aspect - ratio | min - aspect - ratio | max - aspect - ratio device - aspect - ratio | min - device - aspect - ratio | max - device - aspect - ratio color | min - color | max - color color - index | min - color - index | max - color - index monochrome | min - monochrome | max - monochrome resolution | min - resolution | max - resolution scan | grid
【1】颜色(color)
指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为 0
向所有能显示颜色的设备应用样式表
@me">
- @me "><style>
- @media (color){
- .box{height: 100px;width: 100px;background-color: lightblue;}
- }
- </style>
- <div class="box "></div>"
【2】颜色索引(color-index)
颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于 0
向所有使用至少 256 个索引颜色的设备应用样式表 (下列代码无显示,说明返回值为 0)
@me">
- @me "><style>
- @media (min-color-index: 256){
- .box{height: 100px; width: 100px;background-color: lightgreen;}
- }
- </style>
- <div class="box "></div>"
【3】宽高比(aspect-ratio)
宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以 "/" 分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例
向可视区域是正方形或者是宽屏的设备应用样式表
@me">
- @me "><style>
- @media (min-aspect-ratio: 1/1) {
- .box{height: 100px;width: 100px; background-color: lightgreen; }
- }
- </style>
- <div class="box "></div>"
【4】设备宽高比(device-aspect-ratio)
设备宽高比描述了输出设备的宽高比。该值包含两个以 "/" 分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例
向宽高比为 16:9 的特殊宽屏设备应用样式表
@me">
- @me "><style>
- @media (device-aspect-ratio:16/9) {
- .box{ height: 100px;width: 100px; background-color: pink;}
- }
- </style>
- <div class="box "></div>"
【5】设备高度(device-height)
设备高度描述了输出设备的高度
向显示在最小高度 1000px 的屏幕上的文档应用样式表
@me">
- @me "><style>
- @media (min-device-height: 1000px) {
- .box{ height: 100px;width: 100px; background-color: pink;}
- }
- </style>
- <div class="box "></div>"
【6】设备宽度(device-width)
设备宽度描述了输出设备的宽度
向显示在最小宽度 1000px 的屏幕上的文档应用样式表
@me">
- @me "><style>
- @media (min-device-width: 1000px) {
- .box{ height: 100px; width: 100px;background-color: lightblue; }
- }
- </style>
- <div class="box "></div>"
【7】网格(grid)
网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为 1,否则为 0
向非网格设备应用样式表
@me">
- @me "><style>
- @media (grid:0) {
- .box{height: 100px;width: 100px; background-color: lightgreen;}
- }
- </style>
- <div class="box "></div>"
【8】高度(height)
高度描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度
向高度大于 800px 的可视区域的设备应用样式表
@me">
- @me "><style>
- @media (min-height:800px) {
- .box{ height: 100px; width: 100px;background-color: lightgreen; }
- }
- </style>
- <div class="box "></div>"
【9】宽度(width)
宽度描述了输出设备渲染区域的宽度
向宽度大于 800px 的可视区域的设备应用样式表
@me">
- @me "><style>
- @media (min-width:800px) {
- .box{ height: 100px;width: 100px; background-color: lightgreen;}
- }
- </style>
- <div class="box "></div>"
【10】黑白(monochrome)
黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为 0
向非黑白设备应用样式表
@me">
- @me "><style>
- @media (monochrome:0) {
- .box{height: 100px; width: 100px; background-color: lightgreen;}
- }
- </style>
- <div class="box "></div>"
【11】方向(orientation)
方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式
值:landscape(横屏) | portrait(竖屏)
向竖屏设备应用样式表
@me">
- @me "><style>
- @media (orientation: portrait) {
- .box{height: 100px;width: 100px;background-color: lightgreen; }
- }
- </style>
- <div class="box "></div>"
【12】分辨率(resolution)
分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示
[注意]关于屏幕三要素 (屏幕尺寸、分辨率、像素密度) 的相关内容
向每英寸至少 90 点的设备应用样式
@me">
- @me "><style>
- @media (min-resolution: 90dpi) {
- .box{height: 100px;width: 100px; background-color: lightgreen; }
- }
- </style>
- <div class="box "></div>"
【13】扫描(scan)
扫描描述了电视输出设备的扫描过程
值: progressive | interlace
媒体查询包含了一个 CSS2 已有的媒介类型 (或称为媒体类型) 和 CSS3 新增的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假
当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表仍将被下载(只不过不会被应用)
- <link rel="stylesheet" href="style.css" media="print">
- <div class="box">
- </div>
media 并不是'print',所以媒体查询为假。但是,style.css 文件依然被下载
逻辑操作符操作符 not、and、only 和逗号 (,) 可以用来构建复杂的媒体查询
and
and 操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真
[注意] 在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all
满足横屏以及最小宽度为 700px 的条件应用样式表
- @media all and(min - width: 700px) and(orientation: landscape) {...
- }
由于不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all,所以可以简写为
- @media(min - width: 700px) and(orientation: landscape) {...
- }
or
将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真,相当于 or 操作符
满足最小宽度为 700 像素或是横屏的手持设备应用样式表
- @media(min - width: 700px),
- handheld and(orientation: landscape) {...
- }
not
not 操作符用来对一条媒体查询的结果进行取反
[注意]not 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询
- @media not all and(monochrome) {...
- }
- //等价于
- @media not(all and(monochrome)) {...
- }
only
only 操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用
[注意] 经测试,无论是否使用 only 操作符都对结果无影响
- <style media="only screen and (max-width:1000px)">
- .box{width: 100px;height: 100px;background-color: pink;}
- </style>
- <div class="box">
- </div>
实际上,only、not、and 和 or(用逗号表示) 这四种逻辑中,只有 and 比较常用
来源: http://www.cnblogs.com/xiaohuochai/p/5848612.html