深圳市博士通科技有限公司

理解CSS Media媒体查询

2020/11/7 11:20:46   阅读:2705    发布者:2705
在CSS2中,媒体查询只使用于和标签中,以media属性存在

media属性用于为不同的媒介类型规定不同的样式
screen         计算机屏幕(默认值) 
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备(低分辨率、有限的屏幕翻滚能力)
projection     放映机
handheld       手持设备(小屏幕、有限的带宽)
print          打印预览模式 / 打印页
braille        盲人用点字法反馈设备
aural          语音合成器
all            适合所有设备

真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'

媒体属性是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

分辨率(resolution)

分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示
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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}
上面这行代码,在老式浏览器中被解析为media="only",因为没有一个叫only的设备,所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}
上面这行代码,在老式浏览器中被解析为media="screen",它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以,在使用媒体查询时,only最好不要忽略