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