目录：

一、什么是响应式设计，响应式布局的好处

二、响应式常用布局样式

三、需要避免的常见问题

四、关于文字、关于响应式布局缺点、注意

正文

一、什么是响应式布局设计，响应式布局的好处

1.什么是响应式布局设计：Content is like water（如果将屏幕看作容器，那么内容就像水一样）

简而言之，就是一个网站能够兼容多个设备终端，它可以自动识别设备尺寸并相应调整布局，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生，Ethan Marcotte在2010年5月份提出的一个概念。

随着越来越多智能移动设备的诞生，小到智能手表，大到4k显示屏，“主流设备”的概念正在慢慢消失，就算是PC和MAC我们也不能确定用户的浏览窗口有多大（有调研只有一半的用户会全屏显示浏览器），为了给不同终端的用户提供更加舒适的界面和用户体验，响应式设计应时而生。

响应式设计基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。设计师通过设计让内容在不同的设备上都能以最合理、舒适的方式展现，确保用户在不同设备上使用的时候，都会觉得这些内容就是专门为这个设备而设计的，实现体验最大化，而不是单纯的靠缩放而来。这种无缝的体验，让桌面设备的网页在移动设备上也能轻松的阅读并操作，现在已经成为网页设计领域中不可忽略的必要组成部分。

2.响应式布局的好处

a.一个网站兼容多个终端，不用单独为移动端做一个版本

b.流体布局，灵活适配不同设备尺寸，小到320px，大到4K

二、响应式常用布局样式

对页面进行响应式设计，需要对相同的内容进行不同宽度的布局设计。首先要根据目标用户和使用环境等定位考虑侧重的是桌面端还是移动端：桌面优先（从桌面端开始向下设计）；移动优先（从移动端开始向上设计）。 

因为需要适应不同的尺寸，对样式上有较大的局限性，在各种因素的影响下让页面达不到最佳的效果，所以需要根据用户群和使用环境来考虑侧重哪种设备，尽量为最中心的用户提供最优的体验。

无论基于哪种方向开始设计，要适配所有的设备，页面模块不可避免的需要随着设备尺寸做相应的改变。当页面宽度发生变化，超过了制定范围的临界点，页面样式就会发生变化，这个范围我们叫做断点区间。

断点区间：

基于bootstrap 4.x全球主流框架（ Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目）。设置的断点区间越多，适配效果越好。当然也会有缺点，在下面会提到。

▲ 同一个页面在不同的尺寸和设备下都应该是舒适、合理、统一、符合用户习惯的。

响应式布局样式常见的有5种：

1.挤压-拉伸        2.上下-左右        3.删减-增加        4.变换位置        5.隐藏-展开

1.挤压-拉伸

页面中的“消息”内容随着屏幕的变化拉伸挤压，适用于文本内容、纯色背景、按钮、填选框等伸缩不会发生变形的元素。

2.上下-左右

模块内容从左右排版变为上下排版，两栏、三栏变为一栏，适用于表单表格、图文列表、图片列表、主内容+右侧推荐等所有左右排版的组合。

3.删减-增加

移动端不同于桌面端网页，移动端可视区域小，而且使用环境可能在公交、地铁等无法专心操作的环境里，所以应当删减掉不重要的内容，保留主线任务内容，及足够用户分析判断的内容即可。

4.位置变换

桌面端右侧的品牌介绍、网站链接等内容，移动端时变为左右排版放置在顶部。适用于左侧导航+顶部导航、顶部分类+左侧分类、介绍等内容。

▲响应式不是简单的等比缩放，要根据内容重要性在保证易用性基础上灵活布局

5.隐藏-展开

桌面端顶部的分类，在移动端时变为筛选icon，点击展开即可分类筛选；nav bar在移动端时保留了搜索框，其他收进汉堡icon，点击展开所有导航。隐藏-展开适用于分类、导航等内容。

▲很多时候单一的布局方式无法达到最好的效果，需要根据实际的情况，搭配灵活使用。 

下图含以上所有的常见布局样式，找找看？

三、需要避免的常见问题

1.图片比例差异较大，桌面端是16:9，移动端就不要设计成1:1

2.字体在移动端时可读性较差

3.适配移动端时，根据页面的功能主次做减法，不要为了保留所有内容让页面冗长，可读性差，认知难度增大

4.尽量将内容卡片化，避免特殊的样式    

5.移动端是没有hover效果的，要考虑移动端的操作习惯（比如：桌面端hover内容就能出现的说明，移动端可能需要提醒+弹出，或者直接显示出来）

6.不能做完设计稿就不管了，要积极跟进后期测试、调整。

关于字体

设计稿上的字体与用户实际看到的字体是有差别的，特别是适配移动端（使用电脑、电视与手机之间的距离不一样、分辨率也不一样，字体大小需求也会不一样。比如虽然电视屏幕大，但是距离较远，桌面端的字体大小在电视上可读性会很差；电脑上最小的字体是12px，但是在移动端时12px非常小）。设计师后期要积极跟进测试和不断的调整，经历一个项目以后就可以整理出自己的字体、间距规范。我目前使用的字体大小：手机最小18px；ipad最小16px；电脑最小12px； 电视最小28px。（仅做参考）

关于响应式布局缺点  --来自百度百科

1.兼容各种设备工作量大，效率低下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

注意

无论从手机端开始设计，还是电脑端，在做的过程中，要考虑发生变化以后页面整体的样式。相同设备的交互逻辑保持统一，比如平板与手机（手势操作），宽屏显示器与lapto（鼠标操作、触屏操作）。而且要考虑这两种不同的使用环境以及移动端和pc端用户的使用习惯。

以上内容，是本人在工作中总结的观点和经验，有不足、理解不到位之处还望加以斧正，谢谢~

未经许可，禁止转载。