在（zài）设计（jì）中（zhōng）经常遇（yù）到这几个问题：

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

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

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

有没有办（bàn）法能有效解决这些问题呢（ne）？

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

响应式web设（shè）计对交互设计和（hé）前端实现提出了（le）更高的要求，需要考虑清楚（chǔ）不同分辨率下页面（miàn）的布局变化、内容的缩放等。

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

 

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

当浏览器宽度进一步变小后，页面由（yóu）两栏结构（gòu）变为一栏结（jié）构，部分内容的尺寸（cùn）进一步缩小，搜（sōu）索区域也从导航里挪到了（le）导航外。

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

设备类型：包括移动设备（手机、平板（bǎn））和pc。对于移动设备，设计和实现（xiàn）的时候注意增加手势的功（gōng）能。

屏幕尺寸：包（bāo）括（kuò）各种手机屏幕的尺寸（包（bāo）括横向和竖向）、各种平板的（de）尺寸（包括横向和竖向（xiàng））、普通电脑屏幕和宽（kuān）屏。

需（xū）要考虑的（de）问题：

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