[html5] 学习笔记-响应式布局

1、响应式布局介绍

响应式布局是2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本。这个概念是为了兼容移动互联网浏览而诞生的，其目的是为用户提供更加舒适的界面和更好的用户体验。

优点：面对不同分辨率设备灵活性强、能够快捷解决多设备显示适应问题

缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间长

2、响应式布局的实现

CSS中的Media Query(媒介查询)：设备宽高：device-width , device-height 渲染窗口的宽和高：width height 设备的手持方向：orientation 设备的分辨率：resolution

使用方法：外联、内嵌样式

实现屏幕宽度大于640Px时，背景为红色；屏幕宽度小于640px时，背景为蓝色：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link href="4.css" type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)">
     <style>
         @media screen and (min-width:640px) {
             body{
                 background-color: red;
             }
         }
     </style>
 </head>
 <body></body>
 </html>

其中的4.css:

 body{
     background-color: blue;
 }

3、响应式布局实例操作

html代码：

 <!doctype html>
 <html>
 <head lang="en">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title></title>
     <link href="1.css" type="text/css" rel="stylesheet">
 </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>

对应的css文件：

 *{
     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;
     }

     .left,
     .main,
     .right{
         float:left;
         height: 500px;
     }

     .left,
     .right
     {
         width: 200px;
     }
     .main{
         margin-left: 5px;
         margin-right: 5px;
         width:550px;
     }
     .container{
         height:500px;
     }
 }

 @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{
         margin-top: 10px;
         width: 400px;
         height: 200px;
     }
     .right{
         margin-top: 10px;
     }
     .container{
         height: 420px;
     }
 }