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

1.想要网（wǎng）站兼容手机、平（píng）板电（diàn）脑、pc，就得为不同的设备（bèi）定制不同（tóng）的版本。

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

3.很多人并不是在全屏的情况（kuàng）下浏（liú）览我（wǒ）们的页面（miàn），如果让页面（miàn）随着浏览器宽度改变而相应的（de）调整（zhěng）会（huì）不会比较好？

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

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

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

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

 

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

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

响应式页（yè）面的（de）设计（jì）流程（chéng）
第一步：确定需要兼容的（de）设备（bèi）类型、屏幕尺寸
通（tōng）过用户研究（jiū），了解用户使用的设备分布情况，确定需要兼容的（de）设备（bèi）类型、屏（píng）幕（mù）尺寸（cùn）。

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

屏幕尺寸：包括各种手机屏幕的尺（chǐ）寸（包（bāo）括横向和竖（shù）向）、各种平（píng）板的尺寸（包括横向和竖向）、普（pǔ）通电脑（nǎo）屏幕和宽屏。

需要考（kǎo）虑的问题：

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