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

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

2.想要网站的某些页面在宽屏显示（shì）器（qì）下一行显示更多的内容，又得为宽屏定制一个版本。

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

有没有办法能有效解（jiě）决这些问（wèn）题（tí）呢？

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

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

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

 

当浏览器宽（kuān）度变小时，左右两（liǎng）栏的（de）宽度都有缩小，左边的banner图（tú）片和视频也相应缩小（xiǎo），右边（biān）的头像列表由一排4个（gè）变（biàn）为一排两个。

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

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

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

屏幕尺（chǐ）寸：包括各（gè）种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和（hé）竖向）、普通电脑屏幕和（hé）宽（kuān）屏。

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

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