介绍：
就是一个网站能够兼容多个终端 -- 而不是为每个终端做一个特定的版本 这个概念是为解决移动互联网浏览而诞生的
目的：
为用户提供更加舒适的界面和更好的用户体验
优点：
缺点：
CSS中的Media Query(媒介查询)
代码：
*{ margin:0px; padding:0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: aquamarine; } @media screen and (min-width: 960px) { .heading, .container, .footing{ width: 960px; } .container{ height: 500px; } .left, .main, .right{ float: left; height: 500px; } .left, .right{ width: 200px; } .main{ margin: 0px 5px; width: 550px; } } @media screen and (min-width:600px ) and (max-width:960px ){ .heading, .container, .footing{ width: 600px; } .left, .main { float: left; height: 400px; } .right { display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } @media screen and (max-width: 600px){ .heading, .container, .footing{ width: 400px; } .left,.right { width: 400px; height: 100px; } .main{ width: 400px; margin-top: 10px; height: 200px; margin-bottom: 10px; } .container{ height: 420px; } }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!--按原比例缩放--> <meta name="viewport" content="width = device-width,initial-scale=1"> <title></title> <link href="style01.css" rel="stylesheet" type="text/css"> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"> </div> </body> </html>
页面效果：
当屏幕宽度大于960px时：
当屏幕宽度大于600px，小于900px时：
当屏幕宽度小于600px时：
原文：http://www.cnblogs.com/lipeng0824/p/4417229.html
