在设（shè）计中经常遇到这几个问题：

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

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

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

有没有办（bàn）法能有（yǒu）效解决这些问题呢（ne）？

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

响应式web设（shè）计对（duì）交互设计和（hé）前端实现提出了（le）更高的（de）要求（qiú），需要考虑清楚不同分辨率（lǜ）下页面的布局变化、内容的（de）缩（suō）放等。

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

 

当浏（liú）览器宽度变（biàn）小时（shí），左右两栏（lán）的宽度都（dōu）有缩（suō）小，左边（biān）的banner图片和视频也相应缩小，右边（biān）的头像（xiàng）列（liè）表由（yóu）一排4个变为一排两个。

当浏览（lǎn）器宽度进一步变小（xiǎo）后，页面由两栏（lán）结（jié）构变（biàn）为一（yī）栏结构，部（bù）分内（nèi）容的尺（chǐ）寸进一步缩（suō）小，搜索区域也（yě）从导航里挪（nuó）到了（le）导航（háng）外。

响应式页面的设计流程
第一步：确定需要（yào）兼（jiān）容的设备类型、屏幕尺寸
通过用户研究，了解用户使（shǐ）用的（de）设备（bèi）分布情况，确（què）定需要兼容的（de）设备（bèi）类型、屏幕尺寸（cùn）。

设备类型：包括（kuò）移动设（shè）备（手机（jī）、平板）和（hé）pc。对于移动设（shè）备，设计和（hé）实（shí）现的时候注意增加手势的功能。

屏幕（mù）尺（chǐ）寸：包（bāo）括各种（zhǒng）手机屏幕的尺寸（包（bāo）括横向和竖向）、各（gè）种平板的尺寸（cùn）（包括横向和竖向）、普（pǔ）通电（diàn）脑屏幕和（hé）宽屏（píng）。

需（xū）要考虑的问题（tí）：

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