在设计中经常遇到这几个问题：

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

2.想要网站的某些页面在宽（kuān）屏显（xiǎn）示器（qì）下一行显示更多的内容，又得为（wéi）宽屏定制（zhì）一个版本。

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

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

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

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

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

 

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

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

响（xiǎng）应（yīng）式页面（miàn）的设计流程（chéng）
第一步：确定需要兼容（róng）的（de）设备类（lèi）型、屏幕尺（chǐ）寸
通过用户研究，了解（jiě）用户使用的设备分布（bù）情况，确（què）定需要兼容的设备类型、屏幕尺寸。

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

屏幕尺（chǐ）寸（cùn）：包括各种手机屏幕的（de）尺（chǐ）寸（包括（kuò）横向和竖向）、各种平板的尺寸（包括（kuò）横向和竖向（xiàng））、普通电脑（nǎo）屏（píng）幕和宽屏。

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

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