★背景：
      响应式布局是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. 使用sqlserver的游标功能来导数据的常见写法

    一定要自己试过才知道么? 你也没试过吃屎,你怎么知道屎不能吃,难道你试过啊...(没有愤怒的意思) ),),) declare cursor_data CURSOR FOR SELECT [UserN ...

  2. 菜鸟调错（七）——控制台中执行mvn命令后提示‘cmd’不是内部或外部命令

    最近在cmd下使用mvn命令时,在执行完以后总会出现一句“‘cmd’不是内部或外部命令,也不是可执行程序或批处理文件”,如下图: 虽然命令执行成功了,不会有什么影响,但是身为强迫症晚期的我是绝对不能忍 ...

  3. Akismet API 密钥(key)免费获取方法

    Akismet插件是用户使用最广泛的垃圾评论插件,也是wordpress的创始人制作的,同时它也毫无疑问的成为wordpress的默认安装插件,这样的插件可以帮助用户解决垃圾评论的烦恼,而且也不用访客 ...

  4. 送给大家一个安卓版的easyradius短信提示客户端

    好像木有写博客了,送大家小软件,后期会适当更新 主要是方便一些用手机给用户发送到期短信的用户 下载地址: http://www.yss58.com/yss58

  5. [Compose] 20. Principled type conversions with Natural Transformations

    We learn what a natural transformation is and see the laws it must obey. We will see how a natural t ...

  6. [iOS Xcode8]上传AppStore 无法构建版本 没有➕号

    最近iOS10出来了 Xcode也跟着升级到了8 想着App做个更新 于是修改好了代码打算上传新包 ,无奈总是发现构建不了新版本 经过各种蛋疼的查找.我列一下我的经验 1.如果是收费的App,那么是要 ...

  7. 学习之路三十六：SQL知识总结 - [游标||字符串分割]

    好久没有写文章了,今天把前不久项目用到的SQL知识总结一下. 一丶字符串分割 SQL内置函数中是没有Split分割函数的,所以需要自己去实现,不多说,上代码: )) RETURNS @result T ...

  8. PHP操作MongoDB学习(转)

    1  mongodb启动时,设置启动项 C:\>mongodb\bin\mongod --config C:\mongodb.conf 其中mongodb.conf为:    dbpath = ...

  9. 微软MVC对架构的一点思考

    毕业即将三年,在学校学习.做毕设一直使用拖控件的 Winform\WebForm,工作后公司采用MVC3架构做项目. 下面使用mvc的个人总结 : 1.架构上分层清晰.便于研发,耦合性好 2.缓存机制 ...

  10. iOS开发备忘录：自定义UINavigationBar背景图片和Back按钮

    iOS项目,根据设计图,有时需要自定义UIView的UINavigationBar的背景.可以切出来一张1像素左右的背景图片,来充当UINavigationBar的背景. 可以利用Navigation ...