web前端响应式设计总结

2019独角兽企业重金招聘Python工程师标准>>>

一、响应式概述

响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容，有不正确的欢迎大家指正。谈到响应式网站，目前比较主流的做法是通过前端通过判断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跳转，另外页面布局、逻辑、图片等内容都通过不同浏览器来适应。下面具体讲下各个部分的实现所涉及的内容。

二、响应式布局

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

1，移动端布局控制

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

由于这些定义在移动端必须定义，这里还是需要定义，用到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%;
  }

三、响应式html与css

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

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

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

讲到这里相信大家也都懂了。

四、响应式媒体

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

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

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

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

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

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


   
   
   
   
   Accessible text

source: 一个图片源； media: 媒体查询，用于适配屏幕尺寸； srcset: 图片链接，1x适应普通屏，2x适应高清屏；