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

1.想要网站（zhàn）兼容手机、平板电（diàn）脑、pc，就得为不同的设备定制不同的版本。

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

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

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

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

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

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

 

当（dāng）浏（liú）览（lǎn）器宽度变小时，左右（yòu）两栏的（de）宽度（dù）都有（yǒu）缩小（xiǎo），左边的banner图（tú）片（piàn）和视（shì）频也相（xiàng）应缩小，右边的（de）头像（xiàng）列（liè）表由一（yī）排4个（gè）变为（wéi）一排两个。

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

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

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

屏（píng）幕尺寸：包括各种手机屏幕的尺寸（cùn）（包括横向和竖向）、各种平板的尺寸（包（bāo）括横向和竖向）、普通电脑屏幕（mù）和宽屏。

需（xū）要考（kǎo）虑（lǜ）的问题：

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