在正式了解 media query 之前，我们可以先了解一下根据媒体的类型加载不同样式表的方法。我们可以专门针对 screen ,tv, print,projection 这些媒体类型来添加样式。
screen 是屏幕设备，比如电脑，智能手机，平板，都是这个类型的媒体。 tv， 是电视媒体，print 是打印机，projection 是投影仪。
另外还有一些媒体类型，你可以参考一下这个地址 ：https://developer.mozilla.org/en-US/docs/CSS/@media
常用的媒体类型就是 screen 屏幕设备，还有 print 打印机 … 另外如果我们在嵌入样式表的时候，不指定应用的媒体类型，那么默认这个媒体类型是 all ，也就是样式表会应用在所有的媒体类型上 …
下面我们通过一个简单的演示，来理解一下针对媒体类型的样式表 …
打开资料包 xx-xx
这是一个很简单的网页 … 我们要在 css 这个目录下面 … 新建两个样式表 …. 一个命名为 style.css … 一会我们让这个样式表应用在所有的媒体类型上…
再创建一个 print.css … 这个样式我们把它用在 print 打印机这个媒体类型上 …
在网页上，用 <link> 来嵌入这两个样式表 …
<link href="css/style.css" rel="stylesheet">
在这行代码里，我们并没有使用 media 属性去指定它的媒体类型 … 所以这个 style.css 默认会用在所有的媒体类型上 …
再嵌入另一个样式表 … 复制一下 … 修改下样式表的名称 … 然后在这里，我们添加一个 media 属性 … 属性的值设置为 print …
<link href="css/print.css" media="print" rel="stylesheet">
这样当用户在打印这个网页的时候，浏览器会载入这个样式表里的样式 ..
添加样式
下面我们分别在这两个样式表里添加点简单的样式 … 打开 style.css … 使用 body 标签作为样式的选择器 … 添加一个背景颜色 .. 设置为 黑色 ..
再为文字设置一个默认的颜色 … 用 color … 设置为 白色
body{
background:#000;
color:#fff
}
因为 style.css 会用在所有的媒体类型上… 你会看到，网页的背景会变成黑色 … 文字的颜色会是 白色 …
下面我们可以使用打印预览，看一下打印这个网页的效果 … 文件 … 打印 …
浏览器会为打印添加默认的样式 … 你会看到，文字变成了灰色 … 而且并没有背景颜色 … 因为在打印的选项里，没有勾选 背景颜色和图片 …
我们可以勾选一下看看 … 现在，打印预览里的样式跟网页上的样式是一样的 … 黑色背景 … 白色文字 …
这种样式并不适合打印 … 所以我们可以再去设置一下专门为打印准备的样式 … （#取消）
打印
打开 print.css … 因为这个样式表是在 style.css 样式表的下面嵌入的 … 所以在这里定义的样式，可以去覆盖 style.css 样式表里的样式 …
这里我们重新设计一下 body 标签的样式 … 我们把背景颜色设置为白色 … background:#fff … 然后再把文字的颜色设置为黑色 … color:#000 …
保存 …
回到网页 … 刷新 ….
在网页上的样式并没有什么变化 … 打开 文件 … 打印 …
现在， 你会发现，打印预览这里，会使用我们在 print.css 样式表里设置的样式 … 背景是白色 … 文字是黑色 …
