前面的话
一说到响应式设计,肯定离不开媒体查询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
向所有能显示颜色的设备应用样式表
<style>
@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}
</style>
<div class="box"></div>
【2】颜色索引(color-index)
颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0
向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)
<style>
@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}
</style>
<div class="box"></div>
【3】宽高比(aspect-ratio)
宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例
向可视区域是正方形或者是宽屏的设备应用样式表
<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的特殊宽屏设备应用样式表
<style>
@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>
【5】设备高度(device-height)
设备高度描述了输出设备的高度
向显示在最小高度1000px的屏幕上的文档应用样式表
<style>
@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color