1、响应式布局介绍

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

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

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

2、响应式布局的实现

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

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

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

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <link href="4.css" type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)">
  7.      <style>
  8.          @media screen and (min-width:640px) {
  9.              body{
  10.                  background-color: red;
  11.              }
  12.          }
  13.      </style>
  14.  </head>
  15.  <body></body>
  16.  </html>

其中的4.css:

  1.  body{
  2.      background-color: blue;
  3.  }

3、响应式布局实例操作

html代码：

  1.  <!doctype html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="utf-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1">
  6.      <title></title>
  7.      <link href="1.css" type="text/css" rel="stylesheet">
  8.  </head>
  9.  <body>
  10.      <div class="heading"></div>
  11.      <div class="container">
  12.          <div class="left"></div>
  13.          <div class="main"></div>
  14.          <div class="right"></div>
  15.      </div>
  16.      <div class="footing"></div>
  17.  </body>
  18.  </html>

对应的css文件：

  1.  *{
  2.      margin:0px;
  3.      padding:0px;
  4.  }
  5.  
  6.  .heading,
  7.  .container,
  8.  .footing{
  9.      margin: 10px auto;
  10.  }
  11.  *heading{
  12.      height:100px;
  13.      background-color: chocolate;
  14.  }
  15.  .left,
  16.  .right,
  17.  .main{
  18.      background-color: cornflowerblue;
  19.  }
  20.  .footing{
  21.      height:100px;
  22.      background-color: aquamarine;
  23.  }
  24.  
  25.  @media screen and (min-width: 960px){
  26.      .heading,
  27.      .container,
  28.      .footing{
  29.          width:960px;
  30.      }
  31.  
  32.      .left,
  33.      .main,
  34.      .right{
  35.          float:left;
  36.          height: 500px;
  37.      }
  38.  
  39.      .left,
  40.      .right
  41.      {
  42.          width: 200px;
  43.      }
  44.      .main{
  45.          margin-left: 5px;
  46.          margin-right: 5px;
  47.          width:550px;
  48.      }
  49.      .container{
  50.          height:500px;
  51.      }
  52.  }
  53.  
  54.  @media screen and (min-width: 600px) and (max-width: 960px){
  55.      .heading,
  56.      .container,
  57.      .footing{
  58.          width: 600px;
  59.      }
  60.  
  61.      .left,
  62.      .main
  63.      {
  64.          float: left;
  65.          height: 400px;
  66.      }
  67.      .right{
  68.          display: none;
  69.      }
  70.      .left{
  71.          width: 160px;
  72.      }
  73.      .main{
  74.          width: 435px;
  75.          margin-left: 5px;
  76.      }
  77.      .container{
  78.          height: 400px;
  79.      }
  80.  }
  81.  
  82.  @media screen and (max-width: 600px){
  83.      .heading,
  84.      .container,
  85.      .footing{
  86.          width: 400px;
  87.      }
  88.  
  89.      .left,
  90.      .right{
  91.          width: 400px;
  92.          height: 100px;
  93.      }
  94.      .main{
  95.          margin-top: 10px;
  96.          width: 400px;
  97.          height: 200px;
  98.      }
  99.      .right{
  100.          margin-top: 10px;
  101.      }
  102.      .container{
  103.          height: 420px;
  104.      }
  105.  } 

[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. Oracle存储过程中如何使用游标

    --本存储过程的功能:把test_tbl2中与test_tbl1中ID相同但salary不同的记录中的salary的值更新为test_tbl1中的salary的值--创建存储过程create or r ...

  2. iOS navigationBar 的isTranslucent属性

    苹果文档: A Boolean value indicating whether the navigation bar is translucent (YES) or not (NO). The de ...

  3. pip install -r requirements.txt 安装mysqldb失败 解决方案

    在pip.log中出现sh: 1: mysql_config: not found等一坨报错,因为没有安装另一个包: 只要原因是没有安装:libmysqlclient-dev sudo apt-get ...

  4. (中等) POJ 1703 Find them, Catch them，带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  5. (简单) POJ 1511 Invitation Cards，SPFA。

    Description In the age of television, not many people attend theater performances. Antique Comedians ...

  6. (简单) UVA 11624 Fire! ，BFS。

    Description Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the ow ...

  7. shell字符串操作之cut---实现字符串截取

    shell中(字符串截取) cut是以每一行为一个处理对象的,这种机制和sed是一样的.(关于sed的入门文章将在近期发布) 2 cut一般以什么为依据呢? 也就是说,我怎么告诉cut我想定位到的剪切 ...

  8. getElementsByTagName("div")和$("div")区别

    作者:zccst <body> <div class="selected">1</div> <div class="select ...

  9. html页面头部里的meta

    作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...

  10. MySQL常用命令总结3

    id SMALLINT UNSIGNED [AUTO_INCREMENT] PRIMARY KEY, //把id定义为主键且自动排号,每张数据表只有一个主键,不能为NULL,确保记录唯一性 //省略a ...