操作符可以连接媒体类型，还有媒体查询的表达式，比如我们可以把不同的媒体查询表达式组合在一起，使用操作符我们可以创建更复杂的媒体查询。

操作符可以是 and ，也就是 与 … 使用 and 连接的不同的表达式，只有在所有表达式都返回真值的时候，才会触发媒体查询设计的样式 ..

下面我们来试一下这个 and 操作符 ..

在网页的样式里输入

@media (){}

在这个媒体查询里，我们可以使用 and … 连接媒体类型和媒体查询的表达式 … 先输入媒体类型 … 这里我们用 screen … 表示屏幕设备 …

中间加上一个 and 操作符 …

在小括号里输入 min-width: 480px … 然后在大括号里再输入点样式 …

body{
background:#27ae60;
}

这个媒体查询的意思就是，如果媒体类型是 screen … 比如电脑，智能 手机，平板等等 … 同时可视窗口要大于等于 480px … 只有同时满足这两个条件 … 才会应用在后面的大括号里设计的 CSS 样式 …

也就是背景颜色会变成 xx …

保存一下 … 打开浏览器 …

当前的可视窗口宽度大于 480px，并且媒体类型是 screen … 所以会应用媒体查询里设计的 xx 色背景 …

调整可视窗口的宽度 … 小于 480px 以后 … 页面会恢复成最初的样式 … 虽然媒体类型仍然是 screen … 但是可视窗口小于 480px … 这样媒体查询表达式，可视窗口宽度大于等于 480px ，会返回一个假的值 …

因为我们用的操作符是 and .. 所在整个媒体查询就会返回假的值 … 这样页面也就不会再应用设计的 xx 背景样式了 …

我们可以再试一下打印预览 … 文件 … 打印 .. 勾选一下 背景颜色和图片 …

虽然可视窗口尺寸大于 480px … 不过现在媒体类型是 print … 而不是 screen …. 一个条件返回假 … 整个媒体查询也会返回假值 …

所以，也不会去应用设计的 xx 背景样式 …

表达式

下面我们继续使用 and 操作符，去连接其它的媒体查询表达式 … 回到样式表 …

在第一个表达式的后面，再添加一个 and 操作符 … 然后输入一组括号 …. 在括号里 … 可以继续定义媒体查询表达式 …

我们用一个 max-width … 值设置为 767px …

在这条媒体查询里，我们使用 and 操作符，连接了两个媒体查询表达式，还有一个媒体类型 … 只有当他们全部返回真值的时候 … 才会触发应用在大括号里设计的样式 …

也就是，媒体类型是 screen …. 可视窗口的宽度要大于等于 480px … 并且要小于等于 767px …

保存一下… 回到浏览器上 ….

现在可视窗口大于 767px … 页面会使用最初的样式 … 当可视窗口等于或者小于 767px 的时候 … 会触发应用媒体查询里的样式 … 背景会变成 xx 色 …

继续缩小可视窗口的宽度 …. 当可视窗口小于了 480px …. min-width:480px 会返回假 … 整个媒体查询也会返回假 … 页面就又恢复成了原来的样子 ….