响应式文档设计
响应式文档设计三种方法：
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>
重点：
- 浏览器背景总宽度100%；
- 块级元素宽度固定，浮动
- 清除浮动，展现行高
2、@media媒体查询
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>
4、flex布局
父元素display:flex
1 <head> 2 <meta charset="UTF-8"> 3 <title>center</title> 4 <style type="text/css"> 5 body{ 6 margin: 0; 7 padding: 0; 8 } 9 header,footer{width: 100%; height: 40px; background-color: #0bb59b;} 10 main{ 11 margin: 0; 12 padding: 0; 13 } 14 .flex-container { 15 display: flex; 16 flex-flow: row wrap; 17 justify-content: space-around; 18 } 19 .flex-item { 20 background: tomato; 21 width: 400px; 22 height: 150px; 23 line-height: 150px; 24 color: white; 25 font-size: 3em; 26 text-align: center; 27 } 28 </style> 29 </head> 30 <body> 31 <header>header</header> 32 <main class="flex-container"> 33 <div class="flex-item">left</div> 34 <div class="flex-item">middle</div> 35 <div class="flex-item">right</div> 36 </main> 37 <footer>footer</footer> 38 </body>
