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

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

2.想要网站的某些页面在宽屏（píng）显示器下（xià）一行显示更多（duō）的内（nèi）容，又得为宽屏定制一个版（bǎn）本。

3.很多人并不是在全屏（píng）的（de）情况下浏览我们的页面，如果（guǒ）让（ràng）页面随着（zhe）浏（liú）览器宽度改变而相（xiàng）应的调（diào）整（zhěng）会（huì）不会比（bǐ）较好（hǎo）？

有没（méi）有（yǒu）办法能有效（xiào）解决这些问题呢？

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

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

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

 

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

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

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

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

屏（píng）幕尺寸：包括各种手（shǒu）机屏幕的尺寸（包括横向和（hé）竖（shù）向）、各（gè）种平板的尺寸（包（bāo）括横向（xiàng）和竖（shù）向）、普通（tōng）电（diàn）脑屏幕和宽（kuān）屏。

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

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