★背景：
      响应式布局是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. 表单验证Jquery扩展方法类

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  2. 关于SpeedButton中使用下划线快捷键不响应的问题

    在Windows应用程序,很多都有快捷键功能,这个Delphi也有,就是一个按钮上面有一个比如剪切(&X),这个时候剪切的快捷键就是Alt+X,这个功能有时候还是挺好用的,最近,公司中有同事, ...

  3. WPF 定时写入文本

    public static void Start() { ThreadStart start = new ThreadStart(ThreadAction); Thread th = new Thre ...

  4. 配置算法（第4版）的Java编译环境

    1. 下载 1.1 JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html选择“Windows x64 180.5 ...

  5. S1700

  6. CSS基础（五）：定位

    CSS定位机制 CSS 有三种基本的定位机制:相对定位.浮动和绝对定位. 相对定位 相对定位指的是设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. 如果将b ...

  7. delphi7的新生,参与分布式应用开发,调用RESTful API,Json的应用

    前言: 1.公司delphi7开发的传统软件还活得好好的,但是大家都知道delphi早已经日落西山了,现在成了后进.追随者.细细算了已经6.7不用了.新的delphixe7呢,没有时间成本去适应和研究 ...

  8. HttpRequest重写，解决资源战胜/链接超时/分块下载事件通知 问题。

    /************************************************************************************** 文 件 名: WebRe ...

  9. 基于Java的数据采集（终结篇）

    关于写过关于JAVA采集入库的三篇文章: 基于Java数据采集入库(一):http://www.cnblogs.com/lichenwei/p/3904715.html 基于Java数据采集入库(二) ...

  10. IOS中多版本，多设备类型支持注意事项

    IOS系统从07年出来,到现在也有6年了,每年发布一次到两次新的设备,从iPhone1,iPhone2 ... iPhone4s再到最新的iPhone5.硬件在升级的过程中CPU的架构也可能发生变化, ...