在设计中经（jīng）常遇到这几个（gè）问题：

1.想要（yào）网站（zhàn）兼容手机、平板电脑、pc，就（jiù）得（dé）为（wéi）不同的设备定制不同的版（bǎn）本。

2.想要网站的某些页面在宽屏显示器（qì）下一行显（xiǎn）示（shì）更多的内容，又得（dé）为宽屏（píng）定（dìng）制（zhì）一个（gè）版本。

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

有没（méi）有办法（fǎ）能（néng）有效解决这些问题呢？

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

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

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

 

当浏（liú）览器宽度变小（xiǎo）时，左右两栏（lán）的宽度都有（yǒu）缩小，左边（biān）的banner图片和视频也相应缩小，右边（biān）的头像列表由一排4个变为一排（pái）两个。

当浏览器（qì）宽度进一步变小后（hòu），页面由两栏结构变为一（yī）栏结构，部分内容的尺寸进一步缩（suō）小（xiǎo），搜索区域也从导航（háng）里挪（nuó）到了导航（háng）外。

响应（yīng）式页面的（de）设计流程
第一（yī）步：确定需要兼容（róng）的设（shè）备类型、屏幕尺（chǐ）寸
通过（guò）用户研究（jiū），了解用（yòng）户（hù）使（shǐ）用的设备分布情（qíng）况（kuàng），确定需要兼容（róng）的设（shè）备类型、屏幕尺寸。

设备类型：包括移动设备（手机、平（píng）板）和pc。对（duì）于移（yí）动设备，设计和实现的时候注意增加（jiā）手势的功能。

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

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

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