★背景：
      响应式布局是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. centos7 Linux 安装mysql

    安装过程如: http://blog.csdn.net/tengdazhang770960436/article/details/18361979 中间过程出现无法安装mysql-server 解决方 ...

  2. [原创]android自定义控件的最大高度MaxHeightView

    代码地址:https://github.com/Carbs0126/MaxHeightView android中部分控件具有maxHeight功能,如button等,但是对于ViewGroup类的控件 ...

  3. C++的黑科技

    周二面了腾讯,之前只投了TST内推,貌似就是TST面试了 其中有一个问题,"如何产生一个不能被继承的类",这道题我反反复复只想到,将父类的构造函数私有,让子类不能调用,最后归结出一 ...

  4. 64位Linux下编译搭建Nginx1.5与PHP5.5(CentOS6.4)

    (1)安装Nginx1.5.2更新Nginx和PHP的依赖包yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng \libp ...

  5. Win 8.1 下 安装 SQL2005

    1.http://blog.csdn.net/lvjin110/article/details/25122879 2.SQL2005版本 需要是  SQL2005开发版

  6. 命令行下使用javah命令生成.h文件，出现“错误: 无法访问android.app.Activity 找不到android.app.Activity的类文件”的解决方法

    在学习NDK中,当我在项目的bin/classes目录下使用javah命令生成头文件时,出现了“错误: 无法访问android.app.Activity 找不到android.app.Activity ...

  7. 初探Stage3D(一) 3D渲染基础原理

    关于本文 本文主要想介绍一下3D渲染的基本流程,及怎样把一个三角形(0,1,0),(1,0,1),(0,0,1)最终渲染到屏幕上来.文章的目的是对3D渲染流程做一个简单的介绍,其中不涉及任何语言的AP ...

  8. mac 自动配置java版本

    首先输入命令:vi .bash_profile ,添加如下内容: # Mac默认 JDK (Mac默认自带了一个jdk6版本) export JAVA_6_HOME=`/usr/libexec/jav ...

  9. 本人独立博客：http://www.zjmainstay.cn

    为了方便各种管理,本人创建了独立博客,博客地址:http://www.zjmainstay.cn 欢迎新老朋友围观.

  10. 对Joint Training of Cascaded CNN for Face Detection一文的几点疑惑

    最近读了Joint Training of Cascaded CNN for Face Detection这篇论文,论文中把之前人脸检测使用到的cascade cnn,从分开训练的模式,改为了联合训练 ...