在设计中（zhōng）经常遇到（dào）这几（jǐ）个问题：

1.想（xiǎng）要网站兼（jiān）容手机、平板电脑、pc，就得为不（bú）同的设备定（dìng）制不（bú）同的版本。

2.想要网站的某些页面在宽屏显示器下一行显示更（gèng）多的（de）内容，又得为宽屏定制一（yī）个版（bǎn）本。

3.很多人并不是在全屏（píng）的情况下浏览我们的页（yè）面，如果让页面随着浏览器宽度改变（biàn）而（ér）相应的调（diào）整会不（bú）会（huì）比（bǐ）较好？

有没有办法能有效（xiào）解决（jué）这些问题呢（ne）？

响应式Web设计(Responsive Web design)的理念是页面的设（shè）计与开（kāi）发（fā）应当根据（jù）设备环境（屏幕尺寸、屏幕（mù）定向、系统平台等）以及用户行为（改变窗（chuāng）口大（dà）小等（děng））进（jìn）行相应的响应和调整。具体的（de）实践方（fāng）式由多方面组成，包括弹性（xìng）网格和布局、图片、CSS media query的使用等。无（wú）论（lùn）用户正在使用pc、平板电脑（nǎo），或者手机，无论（lùn）是全（quán）屏显（xiǎn）示还是非全屏（píng）的情况，无论屏幕是横向还是竖（shù）向，页面（miàn）都应该能够自动（dòng）切（qiē）换分（fèn）辨率、图片（piàn）尺（chǐ）寸及相关脚（jiǎo）本功能（néng）等，以适应不同设备。

响应（yīng）式web设计对交互设计和前端实（shí）现提出了（le）更（gèng）高的要求，需要考虑清楚不同分辨（biàn）率下（xià）页面的布局变化、内容的（de）缩（suō）放等。

响应式（shì）Web设计的优势：
•开发、维护、运营（yíng）成本优势：页面只有一个，只是（shì）针对不同的分辨率（lǜ）、不同（tóng）的设备（bèi）环境进（jìn）行了一些不同的设计，所以在（zài）开发、维护和运营（yíng）上（shàng），相对多个版（bǎn）本，能节约成（chéng）本（běn）。
•兼容性优（yōu）势：移（yí）动设备新的尺寸层出不（bú）穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变（biàn）化较大，则往往（wǎng）不能兼（jiān）容，而开发（fā）新（xīn）的（de）版本（běn）需要时间，这段时间内的访问就是个问题（tí），但（dàn）是响应式Web设计可以提前（qián）预防这个问题（tí）。
•操（cāo）作（zuò）灵活（huó）：响应式设计是针对页面（miàn）的，可以只对必要的页面进行改（gǎi）动，其（qí）他页面不受影响。

 

当（dāng）浏（liú）览器宽度变小时（shí），左右（yòu）两栏的宽度（dù）都有缩小，左边的banner图片和视频也相应缩小，右边的头像列表由一（yī）排4个变为一（yī）排两个。

当浏览（lǎn）器宽（kuān）度进一步变小后，页面由两栏（lán）结构变为（wéi）一栏结构（gòu），部分内（nèi）容的（de）尺寸进一步缩小（xiǎo），搜索（suǒ）区域也（yě）从导航里挪到了导（dǎo）航外。

响应式页面的设（shè）计流程（chéng）
第一步：确定（dìng）需要兼容的设备类型、屏幕尺寸
通过用户研究，了解用户使用的设备分布情（qíng）况，确定需要兼容的设备类型、屏幕尺寸。

设（shè）备类型（xíng）：包括移（yí）动设备（手机、平板）和（hé）pc。对于移动（dòng）设备（bèi），设计和实现的时候注意（yì）增加（jiā）手势的功能（néng）。

屏幕尺（chǐ）寸：包括各种手机屏幕的尺寸（包括横向和（hé）竖向（xiàng））、各种平板的尺寸（包（bāo）括横向（xiàng）和竖向）、普通电脑（nǎo）屏幕和宽屏。

需要考虑的问题：

•某个页面进（jìn）行响应（yīng）式设计时其适用的尺寸范围（wéi）是（shì）哪（nǎ）些？比如（rú），1688搜索结果页面，跨（kuà）度可以从手机到宽屏（píng），而1688首页，由于结（jié）构过于复杂，想直接（jiē）迁移到手机上，不（bú）太现实，不如直接设计一个（gè）手机（jī）版（bǎn）的首页。
•结合用户需求和实现（xiàn）成本，对适（shì）用的尺寸进（jìn）行取（qǔ）舍。比如一些功能操作的页面，用户一般没有（yǒu）在移动端（duān）进行（háng）操作的需求，没有必要（yào）进行响应式设计。
第二步：制作线框原型
针对确定（dìng）下来的几个尺寸分别制作不（bú）同（tóng）的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何（hé）缩（suō）放（fàng），功能、内容的删减，甚至针（zhēn）对特殊的环境作（zuò）特殊（shū）化的设计（jì）等。这个（gè）过程需要设（shè）计师（shī）和前端开发（fā）人（rén）员保（bǎo）持（chí）密切的沟（gōu）通。