★背景：
      响应式布局是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. Java 中类的加载顺序

    如果类A和类B中有静态变量,静态语句块,非静态变量,非静态语句块,构造函数,静态方法,非静态方法,同时类A继承类B,请问当实例化A时,类内部的加载顺序是什么? 测试代码如下: Class B: pub ...

  2. html5开发之viewport使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  3. C# 实现字符串去重

    方法一 注:需要.net 3.5框架的支持 string s = "101,102,103,104,105,101,102,103,104,105,106,107,101,108" ...

  4. sizeof()用法汇总

    sizeof()功能:计算数据空间的字节数 1.与strlen()比较      strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素.      ...

  5. VMware虚拟机无法识别U盘解决方案

    1. 本机情况: Win7操作系统,VMware虚拟机,虚拟机版本:VMware 7.1,安装Ubuntu10.10,现要求在主机上插入U盘,在虚拟机中显示.   2. 遇到问题: U盘只在Win7主 ...

  6. MSIL解析一（转）

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/15/857140.html 在网上发现了一个非常好的MSIL教程,可惜是英文版的,于是就翻译了 ...

  7. [转]UML八大误解

    潘加宇 本文删节版发表于<程序员>2013年11期 UML(统一建模语言)是软件建模的表示法标准.我从2002年开始专门从事研究和推广UML的工作,在为软件组织提供UML相关需求和设计技能 ...

  8. C#多线程管理代码

    /// <summary> /// 多线程执行 /// </summary> public class MultiThreadingWorker { /// <summa ...

  9. 从头学Qt Quick（3）-- 用QML写一个简单的颜色选择器

    先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...

  10. Fidder模拟Post请求

    背景 最近想用fidder模拟post请求,怎么都传值失败,发现写Composer => Request Body中写的内容,总是无法映射到mvc的action参数上.百度一番,发现如下解决方案 ...