在设计中经常遇到这几个问题：

1.想要网站（zhàn）兼（jiān）容手机（jī）、平板电脑、pc，就得为不同的（de）设（shè）备（bèi）定制不同（tóng）的版本。

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

3.很多人并（bìng）不（bú）是（shì）在（zài）全（quán）屏的情况下浏览我们的页面，如（rú）果让页（yè）面随着浏览器宽度（dù）改变而相应（yīng）的调（diào）整（zhěng）会不会比较好？

有没（méi）有办法能有（yǒu）效解决这些问题（tí）呢？

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

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

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

 

当浏览器宽度变小时，左（zuǒ）右两栏（lán）的宽度都（dōu）有缩（suō）小，左边的（de）banner图（tú）片和视频也相应（yīng）缩（suō）小（xiǎo），右边的头像列表由一排4个（gè）变为一排两个（gè）。

当浏览器宽度进一步（bù）变小后，页面（miàn）由两（liǎng）栏（lán）结构变为一栏结构，部分内容的尺寸进一步缩小，搜索区域也从导航里（lǐ）挪到了（le）导航外。

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

设备类型：包括移动设（shè）备（手机（jī）、平（píng）板（bǎn））和pc。对于（yú）移动设（shè）备，设计和实现的时候（hòu）注意增加手势（shì）的（de）功能。

屏幕尺寸：包括各（gè）种手机屏幕的尺寸（包括横向和（hé）竖（shù）向）、各（gè）种平板的尺寸（包括（kuò）横向和竖向）、普通电脑屏幕和宽屏。

需要考虑（lǜ）的问题：

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