[聚合文章] 总结响应式设计中应该注意的几个点

平时经常会做一些响应式的布局和跨屏页面。也学习了一些响应式设计方面的知识。但是每当有人问我『响应式设计时应该注意一些什么问题』时，总是话在嘴边却不知道该怎么说。正巧最近在看大漠的《图解CSS3》，书中近结尾处有一部分是关于Responsive响应式设计的内容。看完之后，今天试着按照自己脑中的顺序，加上自己的总结，大概记录一下。厘出一个头绪。

以下是我觉得应该注意和遵守的几个点。包括从设计布局时的构思，以及跟非响应式网页中的一些不同点来说。

1. 加meta viewport标签禁用缩放自适应

对于移动设备来说如果不禁用缩放的话将是一个糟糕的体验。并且应该把页面初始缩放比例置为1，这也是响应式网页的先决条件。

2. 确定核心布局，布局保持简单干净，减少无关紧要的元素

考虑到页面需要在不同设备尺寸中都要有良好的表现，应该尽量精简元素的使用，把重心放到维持核心内容的布局一致性，和保持良好简洁的界面体验上。

3. 设计栅格布局方案

常见的响应式框架都会带有栅格式的布局系统，为在不同情况下进行的差异化布局和排列提供条件。例如 Twitter Bootstrap 倡导的12分制网格，为2分、3分、4分甚至6分布局，或是不均等分的布局都提供了健壮的操作性。

4. 满足主要断点(320px 480px 640px 768px 1024px等),针对不同情况应用不同方案

根据常用客户端设备的主要尺寸分布和临界，妥善应用media query进行设计和适配，预备不同的布局方案，必要时进行整体布局的调整。

例如常见左右两栏陈列式布局(37分或46分)，内容展示条理清晰，浏览和阅读易于接受，可适用于PC或7寸以上平板。但在4寸移动设备上则捉襟见肘，可考虑更换为满屏式向下布局。

5. 少用内联元素、绝对定位，百分比拉伸需谨慎勿过度变形

定位使用应该统一和谨慎处理，考虑全局，减少特殊情况的存在。使用百分比布局陈列内容或图片时要小心拉伸过度引起的变形或模糊。

6. 慎用固定值设置图片和内容元素，图片应可伸缩，并限制最大宽

防止图片和内容元素溢出或大小不协调

7. 客户端差异较大时考虑多套图片方案，以及非核心模块的降级和取舍

考虑到从桌面设备到移动端设备的跨度和变化，应尽量保持页面性能和浏览体验，包括图片素材大小需求的改变，移动设备带宽流量消耗等问题的加入，都要纳入考虑范围。

8. IE8以下加入媒体查询兼容脚本(respond.js/media-queries.js)

这个除非放弃兼容，否则肯定是必须的。另外类似Twitter Bootstrap的盒模型使用的兼容(border-box)，也需要考虑进去。

IE兼容的问题又多开去了，这里只考虑写出响应式相关的影响。

9. 考虑频幕分辨率

觉得这是一个潜在的问题，貌似考虑的较少。随着Retina的普及和各种设备增多，不同devicePixelRatio的出现，估计应该会出现更多的优化和解决方案。