響應式文檔設計三種方法：

1、采用float浮動

1 <header>頁眉</header>
2 <main>
3     <div class="left">left</div>
4     <div class="middle">middle</div>
5     <div class="right">right</div>
6 </main>
7 <footer>footer</footer>

CSS部分

 1 <style type="text/css">
 
 2         *{margin: 0px;padding: 0px;}
 3         body{ color: #ffffff;text-align: center; font-size: 24px;}
 4         header{width: 100%; height: 40px; background-color: #7f8c8d;}
 5         main{width: 100%;background-color: #ffffff; }
 6         .left,.middle,.right{float: left; width: 400px;height: 200px
 
;}
 7         .left{background-color: #0b76ac;}
 8         .middle{background-color: #0bb59b;}
 9         .right{background-color: #8d341f;}
10         main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;}
11         footer{width: 100%; height: 40px; background-color: #000000;}
12 </style>
 

重點：

1. 瀏覽器背景總寬度100%；
2. 塊級元素寬度固定，浮動
3. 清除浮動，展現行高

[email protected]

HTML部分

1 <header>頁眉</header>
2 <main>
3     <div class="col-2">
4         <div class="left">left</div>
5         <div class="middle">middle</div>
6     </div>
7     <div class="right">right</div>
8 </main>
9 <footer>footer</footer>

（1）添加文檔描述，設置文檔不可縮放

1 <meta name="viewport" content="width=device-width,initial-scale=1">

（2）為不同寬度的媒介設置CSS（寬度，字體，圖片）

 1 <style type="text/css">
 2         *{margin: 0;padding: 0;}
 3         body{ color: #ffffff;text-align: center; }
 4         header{width: 100%; height: 40px; background-color: #7f8c8d;}
 5         main{width: 100%;background-color: #ffffff; }
 6         .left,.middle,.right{ height: 100px;width: 33.3%; float: left;}
 7         .left{background-color: #0b76ac;}
 8         .middle{background-color: #0bb59b;}
 9         .right{background-color: #8d341f;}
10         main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;}
11         footer{width: 100%; height: 40px; background-color: #000000;}
12         @media only screen and (max-width:1024px ) {
13             .left,.middle{width: 50%; float: left;}
14             .right{width: 100%;}
15             .col-2:after{display: block;content: "";clear: both;zoom: 1;visibility: hidden;}
16         }
17         @media only screen and (max-width: 700px) {
18             .left,.middle,.right{width: 100%;}
19         }
20 </style>

3、Bootstrap響應式框架

（1）引入Bootstrap框架

1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
3 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

（2）HTML部分

 1 <div class="container">
 2     <header class="row">
 3         <div class="col-*-12">頁眉</div>
 4     </header>
 5     <main class="row">
 6         <div class="left col-lg-4 col-md-5 col-sm-6 col-xs-12">left</div>
 7         <div class="middle col-lg-4 col-md-5 col-sm-6 col-xs-12">middle</div>
 8         <div class="right col-lg-4 col-md-2 col-sm-12 col-xs-12">right</div>
 9     </main>
10     <footer class="row">
11         <div class="col-*-12">footer</div>
12     </footer>
13 </div>

（3）CSS部分

1 <style type="text/css">
2         *{margin: 0;padding: 0;}
3         body{ color: #ffffff;text-align: center; }
4         header{height: 40px; background-color: #7f8c8d;}
5         .left{background-color: #0b76ac;height: 200px;}
6         .middle{background-color: #0bb59b;height: 200px;}
7         .right{background-color: #8d341f;height: 200px;}
8         footer{height: 40px; background-color: #000000;}
9 </style>

響應式文檔設計