我们可以使用 , 号分隔开不同的媒体查询 … 这个逗号就相当于是 或 … 也就是使用逗号连接的媒体查询，只要有一条返回真的假 … 就会触发设计的样式 ..

下面我们可以去试一下 … 打开样式表 … 输入

@media screen and (orientation: landscape)

这是一条媒体查询 … 意思是媒体的类型是 screen ，并且使用的方向要是水平方向 …

在这条媒体查询的后面，输入一个逗号 …

然后我们可以继续去定义其它的媒体查询 …

(min-width: 700px) …. 可视窗口宽度大于等于 700px ….

你可以继续使用逗号分隔，来定义其它的媒体查询 … 最后，我们再输入一组大括号 … 再添加点样式 …

用 background 设置 body 标签的背景为一种红色 …

background:#c0392b;

这里我们使用了一个逗号分隔开了两个不同的媒体查询 …. 只要其中的一个媒体查询返回真值 … 就会触发应用大括号里的样式 …

保存 … 回到浏览器 … 刷新 …

现在可视窗口的宽度大于 700px ，所以逗号右边的那条媒体查询会返回真值 … 这样也就会触发应用大括号里的样式 …

背景颜色会使用红色 …

切换到 iOS 模拟器 … 把设备调整为水平方向 …

虽然现在可视窗口的宽度小于 700px … 不过设备的使用方向是水平方向 … 这样第一条媒体查询会返回真值 …

同样会触发应用这个红色的背景 …