标签：round ack 前端 手机 多个 splay title 计算 port
网站兼容多个终端。比如以前没有使用响应式布局的网站，你在不同的浏览器，或者计算机和手机看到的(大小)效果是不一样的（这种不一致性不是前端开发所想要的结果）。而使用了响应式布局，就可以兼容各个浏览器，消除不一致性。
css媒介查询：
使用方法：
实现响应式布局其实很简单，但是响应式布局的缺点就是：代码累赘，影响打开网页的速度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>响应式布局实例</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" width="device-width,initial-scale=1.0"> 7 <style type="text/css"> 8 *{ 9 margin:0px; 10 padding: 0px; 11 } 12 13 .head,.contain,.foot{ 14 margin: 10px auto; 15 background-color: red; 16 } 17 18 .head,.foot{ 19 width: 100%; 20 height: 100px; 21 } 22 23 .contain{ 24 width: 100%; 25 height: 500px; 26 background-color: transparent; 27 } 28 29 .left,.middle,.right{ 30 float: left; 31 margin: auto 5px; 32 background-color: blue; 33 } 34 35 .left,.right{ 36 height: 500px; 37 width: 27%; 38 } 39 40 .middle{ 41 height: 500px; 42 width: 40%; 43 } 44 /*屏幕大小在100px，到960px之间，没有显示*/ 45 @media screen and (min-width: 100px) and (max-width: 960px){ 46 *{ 47 display: none; 48 } 49 } 50 51 52 53 54 55 56 </style> 57 </head> 58 <body> 59 <div class="head"></div> 60 <div class="contain"> 61 <div class="left"></div> 62 <div class="middle"></div> 63 <div class="right"></div> 64 </div> 65 <div class="foot"></div> 66 </body> 67 </html>
以上是非常简单的一个响应式布局，仅供参考。
标签：round ack 前端 手机 多个 splay title 计算 port
原文地址：http://www.cnblogs.com/comefuture/p/6844551.html
