自适应站点的核心，就是一套代码可以在任何尺寸屏幕的设备上，恰当的展示信息。如何根据屏幕的宽度来选择性的使用 css，就尤为重要了。

总共有三种方法可以应用媒体查询：

1.样式表链接的媒体查询属性

直接在 HTML文件头部引入以下代码：

<link rel="stylesheet" media="screen and (max-width:500px)" href="1.css" />
<link rel="stylesheet" media="screen and (min-width:501px) and (max-width:599px)" href="2.css" />
<link rel="stylesheet" media="screen and (min-width:600px)" href="3.css" />

(max-width: 500px) 是指：屏幕尺寸 ≤500px，即使用此 css。

(min-width:501px) and (max-width:599px) 是指：501px≤ 屏幕尺寸 ≤599px ，即使用此 css。

(max-width: 600px) 是指：600px≤ 屏幕尺寸，即使用此 css。

1. css 的背景设置为 bisque，即当 屏幕尺寸 ≤500px
2. css 的背景设置为 aquamarine，即当 501px ≤ 屏幕尺寸 ≤ 599px
3. css 的背景设置为 aqua，即当 600px ≤ 屏幕尺寸

按照代码，可以得到如下效果：

除此之外，还有以下两种方法可以实现。

2.在 @tag 标签嵌入

@media screen and (min-width: 500px) {
  body { background-color: green; }
}

3.在 @import 标签嵌入

@import url("1.css") only screen and (min-width: 500px);

但是因为性能的原因，我们应该避免使用 @import，这是一个代价和优先级都非常高的标签。

在网页设计中，你也要考虑 css 与 @media 的权衡，css 引入的多了，HTTP 请求次数也会增加，拖累整个网站的加载速度。要根据实际情况，合理的选择方法。