昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题。既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。
交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和移动端带宽问题，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能，更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面！既然响应式网页设计牵涉到了这么多的方方面面，那我们又该如何去实现这种页面呢？对此我也特意收集了一些响应式网页的实现方法原理，在马海祥博客上跟大家分享一下：
首先我们应该遵循移动优先原则，交互和设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）。
一、响应式布局
如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：
适用于布局的MediaQueries，这里在马海祥博客上我们就不再做详述，有兴趣的话，可通过官方文档进一步了解。外贸网站优化
3、表格(table)的响应式处理
那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？接下来我们来了解以下的几种针对表格响应式处理的方法：
（1）、隐藏不重要数据列
处理前：
二、响应式内容
1、响应式图片
带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。
处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(devicepixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过查询。
解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签<picture>，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。
<picture>是一个图形element，内容由多个源图组成，并由CSSMediaQueries来适配出合理图形，代码规范如下：
注：source:一个图片源；
media:媒体查询，用于适配屏幕尺寸；
srcset:图片链接，1x适应普通屏，2x适应高清屏；
<noscript/>:当浏览器不支持脚本时的一个替代方案；
<img/>:初始图片；另外还有一个无障碍文本，类似<img/>的alt属性。
虽然<picture>目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill
其原理就是JS获取Source的源以及CSSMediaQueries规则，输出适应图片，逻辑细节这里不再解析，感兴趣的可查看其JS代码，外贸网站推广逻辑不是很复杂，也可以自己封装一个类库，以适用于自身产品，例如图片加载失败的替代方案。
当然，在未来的CSSImageLevel4中已经实现了响应式图片的原生语法：image-set
注：Webkit目前只实现了url()形式的取值，且dppx值取负值[-2x]貌似也是合法的。
当然除此之外，还有其他的响应式处理，如服务端user-agent嗅探。
2、高分辨率(DPI)下的响应式处理
（1）、SVG：优点可承载色彩丰富、设计复杂图形，且渲染不会出现边缘不顺滑；缺点是IE的支持不完美。
（2）、Iconfonts：支持多浏览器，图形颜色大小的修改成本低，易于维护；图形表现单一，不支持色彩丰富且复杂的图形，IE6渲染有毛边。
（3）、-webkit-image-set:只支持单个图形的适配，不利于图形合并，兼容不完美（Safari6+,Chrome21+）。
JS检测：varretina=window.devicePixelRatio>1;
CSSMediaQuery:
3、高分辨率下的1pxborder
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完艾富莱解决方案。
留给我们的思考
⊕响应式不只是技术的实现，它更像是一种对于设计的全新思维模式
⊕浏览的体验短期内还无法超越原生应用
⊕左手操作习惯的交互
⊕Webapp的消息推送
⊕调用本地文件系统的能力弱
⊕响应式图片的解决方案
⊕对PC事件的兼容
⊕WebAPP页面体积的响应式适配
⊕代码实现和内容可维护性之间的权衡
⊕控制设计开发成本
本文为马海祥博客原创文章，如想转载，请注明原文网址摘自于，注明出处；否则，禁止转载；谢谢配合！响应式网页布局的实现方法原理？网页设计。