★背景：
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
      ★利弊分析
      凡事有利必有弊。响应式布局的优缺点也是有必要了解的。
优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示是适应问题。
缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
（敲黑板咯！）总而言之，其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果。
★实现原理
提到响应式布局，就必须谈到在CSS3中的好助攻——media querry（媒介查询），一句话形容它，很强大，很便捷，很好用。
响应式布局的大概实现流程是，media querry查询到终端设备的宽度，高度等，然后根据给定的条件，选择性渲染出特定的样式。
那么问题又来了，media querry能够获取设备的哪些属性值？常用来作条件判断的属性值有设备的宽（device-width）和高（device-height）、渲染窗口（即最大可见的窗口）的高和宽（height，width）、设备的手持方向，竖向还是横向（orientation:portrait || landscape）、设备的分辨率（resolution）。
★语法结构及用法
@media  设备属性值  only （选取条件） ||  not（选取条件）  ||  and（选取条件）,{sRules }
其中，逻辑关键字only表示限定某种设备类型，and表示逻辑与，连接设备属性值、条件1与条件2，not表示逻辑非，排除某种设备。
最后一个属性sRules表示兼容设置的样式表，具体的样式书写包含在中括号中。
      示例代码
  1. <linkrel="stylesheet"type="text/css"media="only screen and (max-width:480px),only screen and(max-device-width:480px)"href="link.css"/>
  2. <!--在link中使用@media。该语句中的only可省略，选定的设备属性值是计算机显示屏幕，第一个条件max-width是指渲染界面的最大宽度，第二个条件max-device-width是指设备最大宽度-->
  4. <style>
  5. @media (min-device-width: 1024px) and (max-width: 989px),            
  6. screen and (max-device-width: 480px),
  7. (max-device-width: 480px) and (orientation: landscape),
  8. (min-device-width: 480px) and (max-device-width: 1024px) and (orientation: portrait) {
  9. /*此处的中括号内就是表示符合条件的样式定义，兼容（sRules）的样式也书写在此处*/
  10. }
  11. /*此条语句的意思为，设备宽度大于等于1024px，并且可见最大为989px；屏幕宽度为480px；屏幕宽度为大于等于480px并且为横向放置的设备；屏幕宽度为大于等于480px并小于1024px。并且是垂直放置的手持设备；*/
  12. </style>
根据以上示例代码可以得出，字符间以空格连接，选取的设备属性值写在小括号之前，选取条件包含在小括号中，设置多个条件用逗号分隔开。
实例：
1.适应iphone 6的样式设置
2.模拟实现网页布局的变化
  1. /* link.css */
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  7. .header,.container,.footer {
  8. text-align: center;
  9. }
  11. .header {
  12. background-color: aquamarine;
  13. }
  15. .left,.main,.right {
  16. background-color: brown;
  17. }
  19. .footer {
  20. background-color:#23ffe2;
  21. }
  23. /*对于设备屏幕大于且等于1000px的设备*/
  24. @media(min-width:1000px){
  25. .header,.container,.footer {
  26. width:1000px;
  27. margin:10pxauto;
  28. /*上下间隔10px，左右居中*/
  29. }
  31. .container {
  32. height:500px;
  33. /*之所以设置了container的宽度是为了避免，left、main、right三个div由于float脱离文档流，导致footer直接跑到header下头*/
  34. }
  36. .header,.footer {
  37. height:100px;
  38. }
  40. .left,.main,.right {
  41. float: left;
  42. height:500px;
  43. }
  45. .left,.right {
  46. width:200px;
  47. }
  49. .main {
  50. margin:auto5px;
  51. width:580px;
  52. }
  54. }
  56. /*对设备屏幕小于1000px且等于600px的设备*/
  57. @media(min-width:600px)and(max-width:1000px){
  58. .header,.container,.footer {
  59. width:840px;
  60. margain:8px auto;
  61. }
  63. .header,.footer {
  64. height:80px;
  65. }
  67. .container {
  68. height:300px;
  69. }
  71. .left,.main {
  72. float: left;
  73. height:300px;
  74. }
  76. .left {
  77. width:200px;
  78. margin:auto8px;
  79. }
  81. .main {
  82. width:620px;
  83. }
  85. .right {
  86. display: none;
  87. }
  88. }
  90. /*对于设备屏幕小于600px的设备*/
  91. @media(max-width:600px){
  92. .header,.container,.footer {
  93. width:480px;
  94. margin:5pxauto;
  95. }
  97. .container {
  98. height:620px;
  99. }
  101. .left,.right {
  102. height:100px;
  103. margin:3pxauto;
  104. }
  106. .main {
  107. height:415px;
  108. }
  109. }
 
 
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"content="width=device-width,initial-scale=1.0">
  6. <!--为了使小屏幕终端设备更好地显示页面,尽量添上这句-->
  7. <title>响应式页面布局Demo</title>
  8. <linkrel="stylesheet"type="text/css"href="link.css">
  9. </head>
  10. <body>
  11. <divclass="header"><h1>header</h1></div>
  12. <divclass="container">
  13. <divclass="left"><h3>left</h3></div>
  14. <divclass="main"><h3>main</h3></div>
  15. <divclass="right"><h3>right</h3></div>
  16. </div>
  17. <divclass="footer"><h1>footer</h1></div>
  18. </body>
  19. </html>
效果图

 

 
 
注意：
1. 一般来说，对于PC端，不仅要设置device-width（或者device-height），而且还要考虑到设置可见宽度和高度的条件。比如，对PC端设置了min-device-width:1000px,然后调节浏览器窗口大小，会发现页面布局不会发生相应的变动。原因在于，对于PC端的硬件高度或者宽度（device-width，device-height）是不变的，因此浏览器窗口大小变化并不会引起页面布局的变化。要使页面随着浏览器窗口的变化而变动，那么应该补充上对可见空间（即浏览器窗口大小）宽度和高度的条件判断设定（width，height）。
 2.在实现响应式布局这之前，我们必须在网页的头部区域加入下面这行代码：
  1. <metaname="viewport"content="width=device-width, initial-scale=1.0">
视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。
width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率;

     initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。

 
 
 
 
 

响应式布局（Responsive layout，RL）的简单Demo的更多相关文章

  1. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  2. CSS3 响应式布局： @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  3. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  4. 一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）

    前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...

  5. JGUI源码：响应式布局简单实现(13)

    首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...

  6. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）

    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...

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

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

  8. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

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

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

随机推荐

  1. mac下忘记mysql密码, 重新设置mysql密码

    step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server)step2:进入终端输入:cd /usr/local/m ...

  2. C#后台弹出对话框

    Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script language='jav ...

  3. saiku执行过程代码跟踪

    使用了很久的saiku,决定跟踪一下代码,看看它的执行核心过程: 一.入口controller代码 1.1.页面打开之后,会发送一个ajax请求 Request URL: http://l-tdata ...

  4. JIT

    http://www.cppblog.com/vczh/category/9583.html

  5. WebDriver基本API使用手册(基于Java和C#)

    WebDriver基本API使用手册(基于Java和C#) http://www.docin.com/p-747728551.html

  6. 头文件 string.h cstring string 区别

    1.#include <cstring>   //不可以定义string s:可以用到strcpy等函数using   namespace   std; #include <stri ...

  7. memcpy 和直接赋值的性能差异

    不废话,看代码: #include <time.h> #include <stdint.h> #include <iostream> #define ARR_LEN ...

  8. jQuery浏览器差异

    //firefox Interface.send(data,function(msg){ $(msg).find("CARINFO").each(function(i){ var ...

  9. CGContext 的一些工具方法

    /* *设置虚线 *param context CGContext *param context CGContext *param lineDashLengths 如: const CGFloat l ...

  10. [MONGODB]: WHEN ARBITER REQUIRED FOR REPLICA SET

    October 27, 2015 · by Srinivas · in MongoDB   MongoDB replica sets provide a number of features that ...