响应式布局

基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。
优点：

1. 面对不同分辨率设备灵活性强；
2. 能够快捷解决多设备显示适用问题。

缺点：

1. 兼容各种设备，效率低下；
2. 代码累赘。

写法：

1. 外链
2. style标签

一般情况下我们会将设备的大小分为：<600px,<960px,>960px。
下面我们通过简单的例子认识一下响应式布局，在这里我们使用外链的方式引入样式：

<link href="style.css" type="text/css" rel="stylesheet">

首先我们先来完成一个简单的布局：

 <div class="heading"></div>
 <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
  </div>
  <div class="footing"></div>

接下来我们针对不同的设备来设置不同的样式：
先来设置当设备大小>960px时：

@media screen and (min-width: 960px){
    .heading,
    .container,
    .footing{
        width: 960px;
    }
    .left,
    .middle,
    .right{
        float: left;
        height: 500px;
    }
    .left,
    .right{
        width: 200px;
    }
    .middle{
        margin: 0 5px;
        width: 550px;
    }
    .container{
        height: 500px;
    }
}

展现效果：

继续来设置当设备大小>600px时：

@media screen and (min-width: 600px) and (max-width: 960px){
    .heading,
    .container,
    .footing{
        width: 600px;
    }
    .left,
    .middle{
        float: left;
        height: 400px;
    }
    .right{
        display:none
    }
    .left{
        width: 160px;
    }
    .middle{
        width: 435px;
        margin-left: 5px;
    }
    .container{
        height: 400px;
    }
}

展现效果：

最后来设置当设备大小<600px时:

@media screen and (max-width: 600px) {
    .heading,
    .container,
    .footing{
        width: 400px;
    }
    .middle{
        margin-top: 10px;
        width: 400px;
        height: 200px;
        margin-left: 10px;
    }
    .left,
    .right{
        width: 400px;
        height: 100px;
        margin-left: 10px;
    }
    .right{
        margin-top: 10px;
    }
    .container{
        width: 420px;
    }
}

展现效果：

这样一来，针对不同的设备大小设置的样式就可以完美解决啦。