负责任的响应式网页设计，将现在炙手可热的响应式web设计推向前沿。群海网络——上海网站设计公司，专业设计响应式网站。

 

让设计响应式化的重要性在于，我们需要处理从台式机到手机的大区间viewport尺寸。但是只考虑屏幕尺寸低估了移动设备，台式机与手机的分界线正在变得模糊，不同类型的设备也趋于提供多样化功能。

 

移动端的性能保证与响应式设计可以同时实现，只要用上一些其他技术。响应式网页设计从不意味着去制造性能问题，这也是我们无法归罪于这项技术本身的原因，而许多人相信它能解决一切问题才是错误的根源。

 

我们能做的是使用组合技巧提升现有的响应式方案并且力求性能的最优化：

提供相同URL及内容，但针对不同设备结构不同； 

在立项规划阶段便需遵循移动优先原则； 

使用display: none时进行真机测试验证资源加载，而非依赖于桌面浏览器模拟； 

在浏览器提供更好的解决方案（如srcset）之前，使用JavaScript分发响应式图片； 

移动端初始viewport的文件内嵌，或者优先加载首屏内容。 

提供更智能的响应式方案如：按需加载、分组响应式、服务器端的自适应处理。 

 

CSS媒体查询无法让设备区分加载和解析，这意味着移动端的手机会下载和解析为更大屏幕提供的CSS。再者，蜂窝网络下CSS的分区渲染浪费的毫秒十分宝贵，有必要避免全依赖于此。

 

正如我们知道的，iPhone不会动态转换为iPad的尺寸，采用JavaScript 的matchMedia查询方法替代CSS媒体查询，则能够保证不同设备显示内容的统一性并且只加载它们各自所需要的CSS。

 

使用特征检测工具可以做到更好，如Modernizr可以构建更智能的UI和功能定义，而不是只依赖于屏幕尺寸。

 

基于单HTML页面为所有屏幕进行响应式设计时，为台式电脑和智能手机传送同样的HTML结构是糟糕的，原因再次回归到移动端的性能问题。

 

即使服务器端存储同一个文件，基于设备分组也可以实现对终端的按需发送。举例来说，为6英寸及更大尺寸的屏幕提供大的浮动式菜单，而为小于6英寸的屏幕提供一个小的汉堡包菜单。响应式技术可以基于分组实现不同情境的适配，如横竖屏模式的转换、不同型号的iPhone（宽为320像素）、各式5英寸的安卓设备（宽为360像素）及平板（宽为400像素及以上）。

 

更智能的响应式解决方案的最后一个选项是服务器，对移动网页来说服务器端进行特征检测及定义并不新奇，市面上早有诸如WURFL和Device Atlas之类的工具库。

 

把响应式设计与服务器端组件联合同样也有前例，已被知晓的有响应式设计+服务器端组件(RESS)，或被称为自适应设计，保障每个终端代码简约性的同时，提高了响应式的速度与可用性体验。

 

一部分情况是前端设计人员可以控制的是服务器上的脚本；另一部分情况是有远程开发团队管理，设计师并不想在每次需要调整UI时都与他们打交道，这种情形下的心情我能够理解。

 

这也是为何在大项目里头应该考虑新的架构层：一种不需要动用后端，只通过前端工程师就能够对服务器端架构进行操作的方式。Node.js是一种卓越的作为前后端之间流通架构的平台，这个架构方式下，前端工程师可以基于内部的流通性进行调整而不需要涉及后端架构，从而实现为所有设备提供轻快的响应式和可用性体验。

 

一个典型的响应式设计是对所有设备发送单一的HTML文件：电视、桌面、平板、智能手机及其后的所有手机。这听起来很赞，但我们生活的世界有蜂窝网络和其他的各种问题。移动设备下你的响应式HTML可能会正确渲染，但它不够快，本来它应该是可以更快的，这也在影响你的转化率。