在设计中经（jīng）常遇（yù）到（dào）这几个问题（tí）：

1.想要网站兼容（róng）手（shǒu）机、平板电脑、pc，就得为不（bú）同（tóng）的设备定制不同的版本。

2.想要（yào）网站的某些页面在宽屏显示器下一（yī）行显示更多的内容（róng），又得为（wéi）宽屏定制一个版本。

3.很多人并不是在全（quán）屏的（de）情况下浏览（lǎn）我们的页（yè）面，如（rú）果让（ràng）页面随（suí）着浏览器（qì）宽（kuān）度改变而（ér）相应（yīng）的调整会不会比（bǐ）较好（hǎo）？

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

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

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

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

 

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

当浏览器宽度（dù）进一步变小后，页面（miàn）由（yóu）两（liǎng）栏结构变为一栏结（jié）构，部（bù）分内容的（de）尺（chǐ）寸进一步缩小（xiǎo），搜索（suǒ）区域也从导航里挪到了（le）导航外。

响应式页面的设计（jì）流程
第（dì）一步：确定需要（yào）兼容的设（shè）备类型、屏幕尺寸（cùn）
通过用户研究，了解用户使用的（de）设备分布情（qíng）况（kuàng），确（què）定需（xū）要兼容的（de）设备类型、屏幕（mù）尺寸。

设备（bèi）类型：包括（kuò）移动设备（bèi）（手机、平板）和pc。对于（yú）移动设备，设计和实现的时候注意增加手（shǒu）势的（de）功（gōng）能（néng）。

屏幕尺寸：包括（kuò）各种（zhǒng）手机（jī）屏幕的尺（chǐ）寸（cùn）（包括横（héng）向和竖向）、各种平板（bǎn）的尺寸（包（bāo）括横（héng）向和竖向）、普通电脑屏幕和宽屏（píng）。

需要考虑的（de）问（wèn）题（tí）：

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