web前端响应式设计总结杏蜜
万能角钢
⼀、响应式概述
响应式是指根据不同设备浏览器分辨率或尺⼨来展⽰不同页⾯结构、⾏为、表现的设计⽅式。这⾥总结了响应式⽹站设计需要涉及到的相关的内容，有不正确的欢迎⼤家指正。谈到响应式⽹站，⽬前⽐较主流的做法是通过前端通过判断userAgent来做页⾯的302跳转。 那么问题来了，使⽤userAgent的问题：
依赖设备本⾝浏览器或设备特点，例如尺⼨，屏幕分辨率等。
需要分配多个站点页⾯跳转适配浏览器。例如：ke.qq，m.ke.qq，来分别存放PC端和移动端的页⾯。
多了⼀次跳转，跳转之前的逻辑不能少，这样⽤户体验就慢了
当然我们也都知道像bootstrap这种ui框架也是响应式的，即写⼀份代码，在浏览器和移动端都能跑，然⽽事实上这些事远远不够的，⽽且在移动端为什么要加载那么多PC端的内容？
我们理解的是完整的响应式页⾯的设计不仅仅是通过屏幕尺⼨来动态改变页⾯容器的宽度等，其实⼤部分⼈通常理解的都停留在这个⽅⾯。完整的响应式⽹站的实现其实需要考虑到以下这些问题：响应式布局、响应式html和css、响应式媒体、响应式javascript。 这些页⾯在移动端和PC端使⽤同⼀个页⾯(⼤家可以⽤chrome浏览器⼀下)，这样就避免了多余的302跳转，另外页⾯布局、逻辑、图⽚等内容都通过不同浏览器来适应。下⾯具体讲下各个部分的实现所涉及的内容。
⼆、响应式布局
响应式布局是⽤来兼容浏览器分辨率，清晰度，横屏，竖屏的页⾯元素布局⽅式。⼀般使⽤栅格⽅式实现。时间思路有两种，⼀种是PC端优先，另⼀种是以移动优先，PC端作为⼀个扩展。由于移动端的资源⽐较优先，⼀般⽐较推荐从移动端扩展到PC端，这样就避免了在移动端加载多余的PC端内容。响应式布局主要可以结合⼏种实现⽅式：
1，移动端布局控制
使⽤ viewport标签在⼿机浏览器上控制布局控制不缩放等通⽤定义。
1 2<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <met
a name="apple-mobile-web-app-status-bar-style" content="blank" />
由于这些定义在移动端必须定义，这⾥还是需要定义，⽤到PC端也不影响，只是有些多余。2，普通元素的栅格布局
对于普通的div布局，使⽤了通⽤简单的栅格布局，相信这个⼤家都知道原理：
1 2 3 4 w{
width: 100%;
}
.row .col-1 {
width: 8.33333333333% }
6 7 8 9 10 11 12 13 14 15 16}
.row .col-2 {
width: 16.6666666667% }1.08b
/* ...⽐较多，这⾥省略 */
.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端的不同布局。
1 2 3 4 5 6 .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已经有⼀个⽤于响应式图形的草案：新定义标签，但因为它还只是草案，⽬前还没有⽀持的浏
览器，期待在不久的未来我们能⽤上。虽然⽬前不⽀持，但我们还是来了解下这个浏览器的新特性，也和我们⼀贯的研究⽅向⼀致。 picture是⼀个图形元素，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<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)
可以认为是picture元素的⼀个polyfill，(什么是polyfill？晶哥第⼀次沙龙讲过，就是修复浏览器特性不⽀持的”腻⼦”)。 未来我们可能使⽤picture元素来进⾏图⽚在页⾯的适应。⽽picturefill是w3c提供的最
新的针对响应式图⽚的设计⽅案，但是需要浏览器⽀持picture 属性，原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图⽚。
这个是picturefill实现的部分源码，⼤致看了⼀下，原理就是使⽤javascript来解析picture元素定义的标签，来在页⾯上强⾏使⽤picture类似元素。但是个⼈觉得性能⽅⾯值得去考虑。
4，adaptive-images
实现原理是浏览器访问服务器图⽚时带上浏览器的窗⼝信息，服务器获取后根据窗⼝信息获取相对应的图⽚返回。 这是⼀个服务端解决⽅案，优点：⼀是不⽤更改现有的HTML标签结构，因此可快捷地应⽤于过去的项⽬；⼆是对于任何图⽚，包括JS添加的，都会起作⽤，即图⽚宽度不会⼤于浏览器宽度，三是由于其采⽤服务端解决⽅案，兼容性很⼴。 但是，其缺点也是明显的：⾸先，其依赖Cookie和JS，浏览器信息需要通过js存放cookie，发送时放在头部发送，这导致⼀些禁⽤或不能使⽤Cookie和JS的浏览器不能使⽤。然后是其对所有图⽚都起作⽤，这不适⽤于那些需要加载⼤图⽚的情形；最后，不适⽤于CDN，因为图⽚都是针对特定设备即时⽣成的，我觉得可以修改后端代码做
5，responsive-images.js(依赖js)
1 2<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; 例如⼀个边框的
1 2 3 4 5 6 7@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结构，另外如果⽤户屏幕是⾼清屏，还的输出双倍分辨率的图⽚适应屏幕。
五、响应式javascript
真正的响应式设计的⽹站，处理使⽤不同的布局、html、css和图⽚，还需要根据浏览器环境来异步加载不同的js⽂件。和之前思路⼀样，这⾥我们主要通过设备环境判断来异步加载不同的javascript，下⾯这样就实现了安装浏览器环境来加载了
1 2 3 4 5 6 7 8 9 10if(isMobile){
require.async(['zepto', './mobileMain'], function($, main){ main.init();
破门弹});
}else{
require.async(['jquery', './main'], function($, main){
main.init();
});
}
这样就有效保证了当时移动端时加载移动端需要的js同时避免了多余的js⽂件的下载。⾄于这⾥如何打包，就是另⼀个问题了，⽽且有点坑要填，这⾥开始我们没有处理好判断逻辑打包的问题，后来通过⾃⼰开发构建插件实现这个逻辑的打包。
六、⼀般响应式⽹站架构古籍扫描仪
这⾥实际不是我们的实现部分，⽽且不符合我们的需求，后台部署实现也复杂，但是这⾥还是总结补充梳理⼀下来做完整地做个总结。
(1) 简单⽹站的响应式结构
使⽤media query指定屏幕适应属性实现⽹页⾃适应，不同设备下的css写在⼀个⽂件内，css按模块管理。模块分开，易于管理和编码实现，也便于维护，是中⼩型⽹站实现响应式的不⼆选择。
缺点：对于样式复杂的⽹站没有拆分，不能根据对应屏幕加载对应样式，造成带宽浪费；不利于优化和cdn。
(2) 分流响应式站点
javascript根据userAgent特性来加载不同域下的css，可以尽可能避免使⽤media query，不同浏览器环境下的样式分离管理，实现了平台样式分离，易于cdn管理。
缺点：需要维护多套样式表，即使公共部分抽离，⼀旦修改，影响多个平台环境；需要判断UA；架构实现稍微复杂。
(3) 后台页⾯直出
和adaptive-images实现⽅法类似，⾸先是建⽴在不同环境下样式分离管理的基础上，后台根据静态⽂件请求所带的cookie信息直出静态页⾯，拉取相对应的css。钙镁离子
缺点：需要依赖cookie机制，服务器需要进⾏处理。(不过这层直出可以使⽤node中间服务获取，由这层服务请求后台，再返回给前端)
七、总结
再来回头看下本⽂总结了啥，还是回到开头的⼏个问题，响应式⽹站设计实现包含的⼏个⽅⾯：响应式布局、响应式html和css、响应式媒体、响应式javascript，总结了较多别⼈的实现⽅案，也提出了我们的实践⽅法，另外补充了下通⽤的响应式架构。这⾥就先总结到这⾥，另外，有不准确的欢迎拍砖。
