web前端响应式设计总结

1、响应式概述

  响应式是指根据不一样设备浏览器分辨率或尺寸来展现不一样页面结构、行为、表现的设计方式。这里总结了响应式网站设计须要涉及到的相关的内容，有不正确的欢迎你们指正。谈到响应式网站，目前比较主流的作法是经过前端经过判断userAgent来作页面的302跳转。

那么问题来了，使用userAgent的问题：

• 依赖设备自己浏览器或设备特色，例如尺寸，屏幕分辨率等。
• 须要分配多个站点页面跳转适配浏览器。例如：ke.qq.com，m.ke.qq.com，来分别存放PC端和移动端的页面。
• 多了一次跳转，跳转以前的逻辑不能少，这样用户体验就慢了

  固然咱们也都知道像bootstrap这种ui框架也是响应式的，即写一份代码，在浏览器和移动端都能跑，然而事实上这些事远远不够的，并且在移动端为何要加载那么多PC端的内容？

  咱们理解的是完整的响应式页面的设计不只仅是经过屏幕尺寸来动态改变页面容器的宽度等，其实大部分人一般理解的都停留在这个方面。完整的响应式网站的实现其实须要考虑到如下这些问题：响应式布局、响应式html和css、响应式媒体、响应式javascript。

先看几个线上的样例：

http://ke.qq.com/huodong/shengkao/index.html

http://ke.qq.com/huodong/yikao2016/index.html

http://ke.qq.com/huodong/nianzhongppt/index.html

  这些页面在移动端和PC端使用同一个页面(你们能够用chrome浏览器一下)，这样就避免了多余的302跳转，另外页面布局、逻辑、图片等内容都经过不一样浏览器来适应。下面具体讲下各个部分的实现所涉及的内容。

2、响应式布局

  响应式布局是用来兼容浏览器分辨率，清晰度，横屏，竖屏的页面元素布局方式。通常使用栅格方式实现。时间思路有两种，一种是PC端优先，另外一种是以移动优先，PC端做为一个扩展。因为移动端的资源比较优先，通常比较推荐从移动端扩展到PC端，这样就避免了在移动端加载多余的PC端内容。响应式布局主要能够结合几种实现方式：

1，移动端布局控制

使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

因为这些定义在移动端必须定义，这里仍是须要定义，用到PC端也不影响，只是有些多余。

2，普通元素的栅格布局

对于普通的div布局，使用了通用简单的栅格布局，相信这个你们都知道原理：

.row{
  width: 100%;
}
.row .col-1 {
  width: 8.33333333333%
}

.row .col-2 {
  width: 16.6666666667%
}

/* ...比较多，这里省略 */

.row .col-12 {
  width: 100%
}

这里借鉴了其它的一下栅格系统的设计： Responsive Grid System Fluid 960 Grid(adaptjs) Simple Grid

3，不一样设备元素容器布局

  通用栅格布局并不能解决咱们所有的问题，例如某个页面板块列表，PC端一排展现4个，移动端一排展现2两个，使用栅格的话咱们就须要从新定义.col-3和.col-6了。对于这种状况咱们的处理方法也比较简单，对于移动端浏览器，经过简单的js逻辑判断，在html的body中加入mobile的内容，在body里面的相同元素使用不一样的宽度布局的方式。这种方式订制化坚强，若是宽度布局用的很少，便可以使用这种不一样宽度布局的方式来实现。这样就实现了一个普通div在移动端和PC端的不一样布局。

.container{
    width: 25%;
  }
  .mobile .container{
    width: 50%;
  }

3、响应式html与css

  这两个结合起来介绍是由于这两个比较强相关。因为移动端页面的html可能相对简单，可是扩展到PC会增长额外的html结构，例以下面截图中的框中部分，在移动端时不显示或显示另外一种样式，例以下面两图对比。那咱们如何作到两个平台两种不一样展现呢？

  方法思路一：使用相同html结构，对于要在移动端要隐藏的dom元素，能够经过display: none来控制html是否显示；对于展现样式不一样的，须要在PC端额外引入css覆盖移动端的原有样式（以前说过了，PC端资源相对移动端比较充裕，PC端能够接受额外增减小量的css文件来实现响应式）。

  方法思路二：动态使用js渲染不一样内容，可是这样会增长移动端js大小，并且css样式文件必不可少。相比之下，咱们使用了思路一的方案。其实使用js的渲染方案也是能够的，不过毕竟保留html比使用js简单。

  讲到这里相信你们也都懂了。

4、响应式媒体

  响应式网站设计比较复杂的就是图片媒体处理了。布局作了响应式处理，可是在咱们手机访问时，请求的图片仍是PC浏览器上请求的大图；文件体积大，消耗流量多，请求延时长。响应式媒体要解决的两个关键点是媒体尺寸自适应和屏幕分辨率自适应。固然这里使用到的媒体主要指图片，但要明白的是，不只仅只有图片。

  先看看通常的媒体大小自适应解决方案，咱们没有使用这里的方案，而是结合借鉴了这里的思路，并且咱们也有必要了解这些解决方案。

1，使用css背景图片 (依赖media query)

  将图片设计为背景图片，并在css经过media query来加载所须要的背景图片。这样就会根据访问设备的属性来加载形影的图片。可是没法定义页面图片图片属性。

2，picture element (依赖浏览器新特性+midea query)

  W3C已经有一个用于响应式图形的草案：新定义标签<picture>，但由于它还只是草案，目前尚未支持的浏览器，期待在不久的将来咱们能用上。虽然目前不支持，但咱们仍是来了解下这个浏览器的新特性，也和咱们一向的研究方向一致。 <picture>是一个图形元素，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范以下

<picture width="500" height="500">
   <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
   <p>Accessible text</p>
   <!-- Fallback content-->
   <noscript>
      <img src="external/imgs/small.jpg" alt="Team photo">
   </noscript>
</picture>

source: 一个图片源； media: 媒体查询，用于适配屏幕尺寸； srcset: 图片连接，1x适应普通屏，2x适应高清屏； <noscript/>: 当浏览器不支持脚本时的一个替代方案； <img/>: 初始图片；另外还有一个无障碍文本，相似<img/>的alt属性。 <picture>目前还不支持，但它的原理咱们是可借鉴的，因此就诞生了一个用于图片响应式处理的类库picturefill

3，picturefill (依赖js+media query)

  https://github.com/scottjehl/picturefill   http://scottjehl.github.io/picturefill/

  能够认为是picture元素的一个polyfill，(什么是polyfill？晶哥第一次沙龙讲过，就是修复浏览器特性不支持的"腻子")。 将来咱们可能使用picture元素来进行图片在页面的适应。而picturefill是w3c提供的最新的针对响应式图片的设计方案，可是须要浏览器支持picture属性，原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片。

这个是picturefill实现的部分源码，大体看了一下，原理就是使用javascript来解析picture元素定义的标签，来在页面上强行使用picture相似元素。可是我的以为性能方面值得去考虑。

4，adaptive-images

http://adaptive-images.com/

  实现原理是浏览器访问服务器图片时带上浏览器的窗口信息，服务器获取后根据窗口信息获取相对应的图片返回。 这是一个服务端解决方案，优势：一是不用更改现有的HTML标签结构，所以可快捷地应用于过去的项目；二是对于任何图片，包括JS添加的，都会起做用，即图片宽度不会大于浏览器宽度，三是因为其采用服务端解决方案，兼容性很广。   可是，其缺点也是明显的：首先，其依赖Cookie和JS，浏览器信息须要经过js存放cookie，发送时放在头部发送，这致使一些禁用或不能使用Cookie和JS的浏览器不能使用。而后是其对全部图片都起做用，这不适用于那些须要加载大图片的情形；最后，不适用于CDN，由于图片都是针对特定设备即时生成的，我以为能够修改后端代码作

5，responsive-images.js(依赖js)

  官网：https://github.com/kvendrik/responsive-images.js   这个与picturefill相似，不过它不依赖media query，而是经过JS检测浏览器的可见视口宽度来决定选择合适的图片，所以其兼容性很广，全部的主流浏览器。同时也不须要额外的标签，而是须要额外的属性，可是它不支持JS添加的图片，至少目前还不支持。

<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,
 <768:small.jpg,<960:medium.jpg,>960:big.jpg' />

6，不一样屏幕分辨率自适应方案

  主要是解决高清屏(retina屏)的问题，因为高清屏与普通屏幕有所区别：

  因为高清屏的特性，1px是由2×2个像素点来渲染，那么咱们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，咱们就不得不拿出一个完美的解决方案。(此处没去深究)JS检测是否高清屏：var retina = window.devicePixelRatio > 1;   例如一个边框的

@media only screen and (-webkit-min-device-pixel-ratio:2),
       only screen and (min-device-pixel-ratio:2) {
button {
  border:none;
  padding:0 16px;
  background-size: 50% 50%;
}

结合实现思路：   然而这里没有一种单一方案能知足咱们的需求，不过借鉴这些思路的处理过程，咱们的处理思路也基本相似：因为这里的图片数据是异步拉取渲染的，并且咱们的图片加载选择和屏幕宽度无关，和浏览器设备相关，那就能够经过浏览器经过js(或css)获取用户设备类型、分辨率，而后经过判断用户设备输出适应的大小图片图片的dom结构，另外若是用户屏幕是高清屏，还的输出双倍分辨率的图片适应屏幕。

5、响应式javascript

  真正的响应式设计的网站，处理使用不一样的布局、html、css和图片，还须要根据浏览器环境来异步加载不一样的js文件。和以前思路同样，这里咱们主要经过设备环境判断来异步加载不一样的javascript，下面这样就实现了安装浏览器环境来加载了

if(isMobile){
    require.async(['zepto', './mobileMain'], function($, main){
        main.init();
    });
}else{
    require.async(['jquery', './main'], function($, main){
        main.init();
    });
}

  这样就有效保证了当时移动端时加载移动端须要的js同时避免了多余的js文件的下载。至于这里如何打包，就是另外一个问题了，并且有点坑要填，这里开始咱们没有处理好判断逻辑打包的问题，后来经过本身开发构建插件实现这个逻辑的打包。

6、通常响应式网站架构

  这里实际不是咱们的实现部分，并且不符合咱们的需求，后台部署实现也复杂，可是这里仍是总结补充梳理一下来作完整地作个总结。

(1) 简单网站的响应式结构

  使用media query指定屏幕适应属性实现网页自适应，不一样设备下的css写在一个文件内，css按模块管理。模块分开，易于管理和编码实现，也便于维护，是中小型网站实现响应式的不二选择。

缺点：对于样式复杂的网站没有拆分，不能根据对应屏幕加载对应样式，形成带宽浪费；不利于优化和cdn。

(2) 分流响应式站点

  javascript根据userAgent特性来加载不一样域下的css，能够尽量避免使用media query，不一样浏览器环境下的样式分离管理，实现了平台样式分离，易于cdn管理。

缺点：须要维护多套样式表，即便公共部分抽离，一旦修改，影响多个平台环境；须要判断UA；架构实现稍微复杂。

(3) 后台页面直出

  和adaptive-images实现方法相似，首先是创建在不一样环境下样式分离管理的基础上，后台根据静态文件请求所带的cookie信息直出静态页面，拉取相对应的css。

缺点：须要依赖cookie机制，服务器须要进行处理。(不过这层直出可使用node中间服务获取，由这层服务请求后台，再返回给前端)

7、总结

  再来回头看下本文总结了啥，仍是回到开头的几个问题，响应式网站设计实现包含的几个方面：响应式布局、响应式html和css、响应式媒体、响应式javascript，总结了较多别人的实现方案，也提出了咱们的实践方法，另外补充了下通用的响应式架构。   就先总结到这里，另外，有不许确的欢迎拍砖，以为还行的也欢迎点赞哦~哈哈

原文连接(更多相关文章)：http://ouvens.github.io/frontend-css/2016/01/15/responsive-css.html