仿站

从教程开始就有人一直追着我问这个网页自适应怎么做。其实这个功能现在做起来很简单，但是你要是前边的基础掌握的不好那就剩下迷糊了。简单的说就是一个媒体查询的事情，但是……做起来常常要写两遍 css （如果变化比较大的话），甚至很多遍（适应多种屏幕）……

我们先来讲个简单的例子看看。有多么简单呢？页面结构如下：

<div id="change-color"></div>

然后 css 如下：

#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}

这个很简单，大家都能想象出来是一个多么枯燥的页面，一个 300 × 300 像素的红色正方形在页面的中上部。学到这里的同学对于这样简单的代码应该是无压力的了。然后我们在这段 css 后面再加上一点内容，改做：

#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}

来一起看看这个 css 哦，这段 css 可以分作两个部分，第一部分就是我们上面写的对 #change-color 定义的 css ，这个无需解释了。第二部分跟我们以前看到的不一样哈，但是如果去掉 @media (max-width:800px){……} 这样的结构之后，我们可以发现，剩下的内容也是对 #change-color 的定义，只是跟上面略有不同，一个是宽度发生了变化，一个是背景色改了。那么现在我们来解释一下这部分代码。

默认情况执行第一部分的定义，那么背景色就应该是红色的，宽度是 300px。一切如同我们与想的一样。当浏览器内容部分的宽度小于等于 800px（符合条件，最大宽度为 800px）时，使用第二部分的定义，也就是宽度变成了90%，背景色变成了蓝色。

然后我们看看实际效果：当网页宽度大于 800px

然后调整窗口宽度到内容区域小于 800px

现在效果实现了，那么在来解释一下关键的语法——

@media (条件){条件达成时执行的 css 样式}

条件可以设置很多种，比如：max-width、min-width、max-height、min-height …… max 是最大，min 是最小，就是当宽度（高度）最大（最小）是什么什么时去执行大括号里的东东。注意：这里指的不是一个单纯的值，而是一个范围，他给出的是一个上限（或者下限）。

甚至我们还可以联合几个条件一起使用，比如：

@media (min-width:300px) and (max-width:800px){条件达成时执行的 css 样式}

这就是当浏览器的内容范围宽度在 300px 到 800px 执行这部分 css 语句。

现在留一个问题给大家思考：前面举例的 css 代码可以被看作两个部分，那么我把两个部分的顺序调调换行不行？为什么？

现在，我们来一起做个小练习看看。我们就做一个很简单的自适应页面好了。这个页面十分简单，就是页头、页尾、内容、侧边四部分，很古典的布局（土得掉渣）。来开始写结构

<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sider"></div>
</div>
<div id="footer"></div>

然后为了我们方便辨认，我再给每个里面加个标题写明他们是什么，然后就变成了这样：

<div id="header"><h2>页头</h2></div>
<div id="main">
<div id="content"><h2>内容</h2></div>
<div id="sider"><h2>侧边</h2></div>
</div>
<div id="footer"><h2>页尾</h2></div>

又是如此简单的 html ，剩下的工作还是扔给辛苦的 css 去了。

h2 {
text-align:center;
line-height:36px;
}
#header, #footer {
width:960px;
height:150px;
margin:10px auto;
background:#CCC;
overflow: hidden;
}
#main {
width:960px;
margin:10px auto;
background:#FCC;
padding:15px;
overflow: hidden;
}
#content, #sider {
float:left;
margin:15px
}
#content {
width:600px;
height:450px;
background:#CFC;
}
#sider {
width:300px;
height:350px;
background:#CCF;
}

然后就写出了如下这个奇葩的页面：

这诡异的配色……到底还是清晰的显示出了每一个区域的位置，各位将就看下吧。

然后我们在 css 后面继续添加内容，当然我们需要思考一下，当前的布局适应的是电脑，大屏幕哦，要是屏幕小于 960px 就肯定要出现横向滚动条，比如……手机

那么我们来适应一下我们假象中的小屏幕吧。

@media (max-width:1024px){
#header, #footer {
width:90%;
}
#main {
width:90%;
}
#content, #sider {
float:none;
margin:5%;
width:90%;
}
}

大家看到我为小于 1024px 的屏幕写的 css 并不多，是因为没写到的部分可以继承前面的默认定义，现在元素的宽都改作了百分比的形式。这时候你打开网页……嗯，还是以前的样子哈，但是让你调整窗口的宽度逐渐变小，就会看到网页变成下图的样子，这就是网页自适应了。