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

[html5] 学习笔记-响应式布局的更多相关文章

  1. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  2. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  3. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  4. SharePoint 2013 的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  5. SharePoint 2013的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  6. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. HTML5学习总结-番外05 响应式布局

    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...

  8. [学习笔记]viewport定义，弹性布局，响应式布局

    一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...

  9. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

随机推荐

  1. 仿苹果短信（微信 ，qq）左划弹出菜单

    难点: 1.功能的实现,左划.ListView的复用 2.单行显示,多行显示 3.ListView分割线.点击阴影,上下滑动左右滑动无阴影.多点触控改为单点触控 4.融球动画 http://blog. ...

  2. asp.net 输出Excel

    private void lbtExportToExcel_Click(object sender, EventArgs e) { string strdate = DateTime.Now.Mont ...

  3. 原理图及PCB设计

    原理图以及元件的绘制1. 画数据总线时,需要给总线一个Net Label,例如:databus[0..7],并且还需要在每个入口和出口处设置一致的标号.2. ERC 电气规则检查,Electronic ...

  4. Codeforces#362

    A题 题意:给定一串数列,t,t+s,t+s+1,t+2s,t+2s+1......问某一个数是否是数列当中的 题意:只需判断(x-t)与(x-t-1)能否整除s即可,注意起始时的判断 #includ ...

  5. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...

  6. Instruments使用实战

    http://www.cocoachina.com/ios/20150225/11163.html 最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析 ...

  7. Tsinsen-A1488 : 魔法波【高斯消元+异或方程组】

    高斯消元. 自己只能想出来把每一个点看成一个变量,用Xi表示其状态,这样必定TLE,n^2 个变量,再加上3次方的高斯消元(当然,可以用bitset压位). 正解如下: 我们把地图划分成一个个的横条和 ...

  8. sql语句的截取字符串下标是从1开始

    这里的指的sqliter数据库 substr函数 substr(date,1,10)

  9. group by 汇总

    group by 的意思为分组汇总.使用了group by 后,要求Select出的结果字段都是可汇总的,否则就会出错. 比如,有:{学号,姓名,性别,年龄,成绩}字段 这样写:SELECT 学号,姓 ...

  10. UVa 757 - Gone Fishing

    题目大意:John有h的时间可以去钓鱼,有n湖可钓鱼,以5分钟为时间单位,每个湖初始每个单位时间可钓f条鱼,每下一个时间单位数量减少d条.同时,John只能从1号湖往后走进行钓鱼,湖之间的距离需要t个 ...