近几年来好多的高科技的升级造成过去网站的落后，现在让从事衡水网站建设也有了不少的压力，因为现在都行自适应网站，过去电脑的屏幕小一般网站都能满足，现在又是挨派又是手机的，没有自适应网站还真的不行，那么什么是自适应网站呢？

自适应网页设计近来很流行，如果你接触比较少请参见 responsive sites。当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了。这里是一个快速教程，通过学习你会自适应网页和media queries的基本原理（前提你有css基础）。

查看演示 Demo
 
Step 1：Meta 标签

为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

在这个例子中，页面布局包括 header，content，sidebar和
footer。header固定高度为180px，content宽600px，sidebar宽300px。

Step 3. Media Queries

CSS3 media query是自适应网页设计的关键，衡水网站建设他就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。

如果视口宽度小于等于980px，下面规则生效。

这里将容器绝对宽度改用百分比显示，让页面排版更加灵活。
/* for 980px or less */
@media screen and (max-width: 980px) {

 #pagewrap{
  width: 94%;
 }
 #content{
  width: 65%;
 }
 #sidebar{
  width: 30%;
 }

}

如果视口宽度小于等于700px， 将#content和#sidebar宽度设为自动(auto)，并移除它的浮动属性(float)，这样它会变成满版显示。
/* for 700px or less */
@media screen and (max-width:700px) {

 #content {
  width: auto;
  float: none;
 }
 #sidebar {
  width: auto;
  float: none;
 }

}