在网页上使用 Media Query 有两种方法 … 一种是，我们可以在链接样式表用到的 <link> 标签上，添加一个 meida 属性 …. 在这个属性里，可以去设置媒体查询 …
比如像这行代码
<link rel="stylesheet" media="(max-width: 480px)" href="mobile.css">
跟嵌入普通的样式表的方法差不多，只不过这里我们添加了一个 media 属性 … 属性的值就是我们设置的媒体查询 …
这里我们用了一个简单的媒体查询 … 这个括号里面的东西就是媒体查询的表达式。在这面，可以设置要查询的媒体特性和它的值 ...
这里我们查询的是 width ，也就是宽度这个媒体的特性 … 在宽度的前面加上了一个 max .. 表示最大的宽度 …
480px 是设置的值 … 合起来的意思就是 … 如果设备的 viewport ，可视窗口，或者说浏览窗口的最大宽度是 480 px 的时候 … 也就是宽度是480px，或者小于 480px …
满足了这个条件 … 页面才会使用 mobile.css 这个样式表里定义的样式 …
在样式表里使用媒体查询
另一种应用媒体查询的方法，是直接在样式表里使用类似的形式，来实施媒体查询 …
在样式表里，可以先用一个 @media … 它的后面是一个括号，在括号里可以设置媒体查询，比如这个 max-width:480px 就是设置的媒体查询 … 然后在后面的大括号里，我们可以去设计当满足了这个条件的时候，应用到网页上的 CSS 样式 …
总结
这里我们看到的是两个简单的媒体查询的例子，在实际的应用中，我们可能需要复杂一些的媒体查询，可以在媒体查询里加上媒体的类型 …
使用操作符来连接多个媒体查询的表达式等等。在后面的视频里我们再去学习它们。
