在设计中经常（cháng）遇到这几个问题：

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

2.想要网站的（de）某些页面在宽屏显示器下一（yī）行显示更多（duō）的内容，又得为（wéi）宽（kuān）屏（píng）定制（zhì）一个版本。

3.很多（duō）人并不是（shì）在全屏的（de）情况下浏览我们的页面，如果（guǒ）让页面（miàn）随（suí）着浏览器宽度改变而相应的调整会不会（huì）比较好？

有没有办法能有（yǒu）效解决这（zhè）些问题呢？

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

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

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

 

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

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

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

设（shè）备（bèi）类（lèi）型：包括移动设（shè）备（手机、平板）和pc。对于（yú）移动设备，设计和实现的时候注意增加手（shǒu）势的功（gōng）能（néng）。

屏幕（mù）尺寸：包括各种（zhǒng）手机屏幕的尺寸（包（bāo）括横向（xiàng）和竖向）、各（gè）种平板（bǎn）的尺寸（包括横向和竖向）、普通电脑（nǎo）屏幕和宽屏（píng）。

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

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