前端响应式设计漫谈

当前，响应式开发已经深入前端开发领域，几乎成为C端界面开发的标配。前端开发者不得不更多考虑界面的响应式特性，以使界面具有更良好的设备适配特性、更一致的用户体验。

响应式不是什么

我们知道10多年前的网页，那时基本上以PC版面为主，少数页面才会单独开发成移动端页面，但元素的丰富性、美观性、交互性与PC是无法想比的。在PC页面中，浏览器常常提供了缩放操作，以便用户在手机上查看，规避手机上展示不全PC页面的问题。但这仍然是极为糟糕的体验，一眼看不到网页的全貌，即便是做了wap的网页，也是单独做了一套网页，这就典型的不是响应式。

为什么采用响应式

我们首先需要知道的为什么需要采用响应式设计？也就是说，采用响应式设计有什么好处？

• 更多的设备适配。相比于非响应式设计界面，响应式开发的界面能够适配更多的设备和场景，从而收获更好的用户体验。
• 更一致的用户体验。这就是说：响应式界面针对不同设备尽量采用了相同的布局来实现，这比使用多套不同的布局来实现适配更加协调。
• 更好的seo。响应式界面由于布局代码上具有一致性，仅仅是样式的一些变化，这利于搜索引擎更好的抓取不同设备上的关键代码，会使得seo效果更好。对于极为重视seo的业务，甚至是核心诉求。

响应式开发是媒体查询吗

几乎所有的前端开发者都会接触到媒体查询，并基于媒体查询做设备适配。这使得一些开发者尤其是初学者认为响应式开发就是基于媒体查询的适配，因为从效果上来看，这也是为了实现多种设备的“响应”，但这种观点是极为片面，甚至是错误的。

应该说：

• 媒体查询是响应式设计实现的一种技术手段，但它不是响应式设计本身，这是两个不同层次的概念。
• 我们的响应式开发，通常会用到媒体查询代码，但也可以不用媒体查询，譬如使用flex布局、百分比、rem等方案，其核心是使得界面的布局尽量具有跨设备的一致性，在这个目的下，媒体查询只是用于实现的一种技术方案。

我的界面需要采用响应式吗

响应式设计的第一步，便是定位你的目标群体，这是你决定要不要采用响应式开发的关键。

• 对于C端界面，一般而言现在都要求做响应式了，或者说无论有没有这方面的诉求，做响应式有益无害。当然，相比于非响应式，耗费的开发时间会更多。
• 对于B端系统、后台界面，由于仅供用户查看数据、管理数据使用，一般数据的展示、操作较多，对体验性要求不高，对数据的准确性要求较高。这时，就不需要考虑响应式设计。
• 一些系统由于本身历史原因不太支持响应式开发，这时为了保持代码的一致性，可能也暂时可以不用响应式。但从长远来看，一般还是会逐步过渡到响应式。某些企业而言，可能会成立专门的响应式推进小组，用于公司网站的响应式迭代。

响应式响应在哪儿

响应式的响应在哪儿呢？

• 响应式针对几乎所有的尺寸都能实现良好的展示。小到手机，中至平板，大到PC、4K分辨率以上屏幕，都能良好适配，甚至一般要求全分辨率适配。即除开一些实在过小的非正常屏幕，几乎所有分辨率都能良好展示。
• 响应式具有比较一致的页面布局。尤其对于html结构，在不同分辨率下，会尽可能的使html保持一致，而不是分成多套不同的html布局。前面提过，这对于SEO也具有很大的作用。
• 响应式在样式上也具有较多的自动适配特性。这就是说，在分辨率A下，某容器可能占有40%的版面，到了分辨率B下，某容器仍然占有40%的版面，这种特性在响应式中更多的体现。因此，响应式中多使用灵活而非固定的样式属性。

响应式开发建议

• 尽量使用相对单位，而非绝对单位。譬如，百分比、vw、vh、rem、em等，而非使用px。
• 尽量使用具有适配性的布局，而非写几套。譬如，使用flex布局，将很好的利用其自动伸缩特性。
• 尽量推进UX部门采用响应式设计稿。对于响应式而言，一套是体现不出响应式特性的，因此响应式设计稿一般需要3套以上。
• 适当采用栅格式布局。
• 少数特殊情况特殊优化。