css 媒体查询

文章目录

一、什么是媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在

浏览器

和

设备的环境

与你指定的

规则相匹配

的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。

二、语法

@media media-type and(media-feature-rule){
  css rules 
}

注释：

• media-type： 媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）（all 所有类型、print 打印类型、screen 屏幕类型、speech等）；
• media-feature-rule： 媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
• css rules ： CSS 规则，会在测试通过且媒体类型正确的时候应用。

三、媒体特征规则

1、宽和高

为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用

min-width

、

max-width

和

width

媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用 CSS。

例：

@media screen and(max-width: 400px){body{color: blue;}}

解释： width（和height）媒体特征可以以

数值范围

使用，于是就有了

min-

或者

max-

的前缀，指示所给的值是最小值还是最大值。上面的css要让颜色在视口

窄于 400 像素

的时候变成蓝色的话，可以用

max-width

。

2、朝向

一个受到良好支持的媒体特征是orientation，我们可以用它测得

竖放（portrait mode）

和

横放（landscape mode）

模式。

例：

@media(orientation: landscape){body{color: rebeccapurple;}}

解释： 上面代码指的是要在设备处于横向的时候改变 body 文本颜色。

3、逻辑“与”

为了混合媒体特征，你可以以与在上面使用and很相同的方式，用

and

来混合媒体类型和特征。

例：

@media screen and(min-width: 400px)and(orientation: landscape){body{color: blue;}}

解释： 我们可能会想要测得

min-width

和

orientation

，而 body 的文字只会在视口至少为 400 像素宽，且设备横放时变为蓝色。

4、逻辑“或”

如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用

逗号

分开这些查询。

例：

@media screen and(min-width: 400px), screen and(orientation: landscape){body{color: blue;}}

解释： 文本会在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了。

5、逻辑“非”

你可以用

not

操作符让整个媒体查询失效，这就直接反转了整个媒体查询的含义。

例：

@medianot all and(orientation: landscape){body{color: blue;}}

解释： 文本只会在朝向为竖着的时候变成蓝色。