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

1.想要网站兼容手机、平板电脑、pc，就（jiù）得（dé）为不同的设备（bèi）定制不同（tóng）的版本。

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

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

有没有办法能有效解决这（zhè）些问（wèn）题呢？

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

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

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

 

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

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

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

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

屏（píng）幕（mù）尺寸：包括各（gè）种手机屏（píng）幕的（de）尺寸（cùn）（包括横（héng）向和（hé）竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。

需要考虑的问题：

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