关于响应时布局..

什么叫作响应式布局？

也便是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，随着如今各类终端的快速发展，作出一些可以适应不一样分辨率、不一样平台、不一样屏幕大小的网页尤其重要，这不只使得本身的网站适应不一样终端的能力更强，同时也为用户带来了良好的体验。并且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着愈来愈多的设计师采用这个技术，咱们不只看到不少的创新，还看到了一些成形的模式。

怎样实现响应式布局？

对于这个问题，咱们能够经过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS能够更精确做用于不一样的媒体类型和同一媒体的不一样条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询能够被用在CSS中的@media和@import规则上，也能够被用在HTML和XML中。经过这个标签属性，咱们能够很方便的在不一样的设备下实现丰富的界面，特别是移动设备，将会运用更加的普遍。

首先咱们要容许网页宽度自动调整

在网页代码的头部，加入一行viewport元标签：

1	< meta name = "viewport" content = "width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

下面经过Media Query咱们能够获得不一样设备屏幕的宽和高，从而咱们就能够分别处理了。根据不一样的设备屏幕宽度，设置不一样的CSS。那么这里有两种方法：

一、外联样式表

在这里咱们能够根据不一样的设备载入不一样的CSS样式表

1	< link rel = "stylesheet" type = "text/css" media = "screen and (min-width:960px)" href = "css/gt-960px.css" >

当页面宽度大于等于960px时，载入样式表gt-960px.css

1	< link rel = "stylesheet" type = "text/css" media = "screen and (min-width:600px) and (max-width:960px)" href = "css/gt-600px-lt-960px.css" >

当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css

1	< link rel = "stylesheet" type = "text/css" media = "screen and (max-width:600px)" href = "css/lt-600px.css" >

当页面宽度小于等于600px时，载入样式表lt-600px.css

二、样式表中内嵌法

当页面宽度大于等于960px时

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@media screen and ( min-width : 960px ){      .header,      .container,      .footer{          width : 960px ;      }                 .sidebarLeft,      .main,      .sidebarRight{          float : left ;          height : 400px ;      }      ... }

当页面宽度大于等于600px且小于等于960px时

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media screen and ( min-width : 600px ) and ( max-width : 960px ){      .header,      .container,      .footer{          width : 600px ;      }                  .sidebarLeft,      .main{          float : left ;          height : 400px ;      }      ... }

当页面宽度小于等于600px时

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media screen and ( max-width : 600px ){      .header,      .container,      .footer{          width : 400px ;      }                 .sidebarLeft,      .sidebarRight{          width : 400px ;          height : 100px ;      }      ... }

请注意，我这里仍是用到了绝对宽度，如”width:400px;“，严谨地说，这仍是不够规范的，固然这还要看具体状况了，若是想彻底响应式布局的话，那么就不能使用固定的宽度了，能够设为自动或百分比，如”width:auto;“或”width:xx%;“，另外字体也要设为百分比。

对于布局来讲，咱们算是搞定了，但页面中的图片和视频也不能忽视。

弹性图片

咱们须要为图片设置max-width: 100%和height: auto，来实现其弹性化。

1 2 3 4 5

img {      max-width : 100% ;      height : auto ;      width : auto 9 ; /* ie8 */ }

弹性内嵌视频

一样，对于视频咱们也须要作max-width: 100%的设置；可是Safari对embed的该属性支持不是很好，但咱们能够用width: 100%来代替

1 2 3 4 5 6

.video embed , .video object, .video iframe {      width : 100% ;      height : auto ;