在设计中经常遇到（dào）这几个问（wèn）题：

1.想（xiǎng）要网站兼（jiān）容手（shǒu）机、平板电脑、pc，就得（dé）为不同的设备定（dìng）制不同的版本。

2.想要网站（zhàn）的某些页（yè）面（miàn）在宽屏显示器下一行显示更多的内容，又得为宽屏定（dìng）制一个版本（běn）。

3.很（hěn）多人并（bìng）不是（shì）在全屏的情况下浏览我们（men）的页（yè）面，如果让页面随（suí）着（zhe）浏（liú）览器（qì）宽度改变而相应（yīng）的调整会不会比较（jiào）好？

有没有办法能有效解决这些（xiē）问题呢？

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

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

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

 

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

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

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

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

屏（píng）幕（mù）尺寸：包括各种（zhǒng）手（shǒu）机屏幕（mù）的（de）尺寸（包括横（héng）向和（hé）竖（shù）向）、各种平板的尺寸（包括横（héng）向和竖向（xiàng））、普（pǔ）通电脑（nǎo）屏幕和宽屏。

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

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