在设计中经常遇到这（zhè）几个问（wèn）题（tí）：

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

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

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

有没有办法（fǎ）能有效解决这（zhè）些问题（tí）呢（ne）？

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

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

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

 

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

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

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

设备类型（xíng）：包（bāo）括移动设备（手机（jī）、平（píng）板）和pc。对于（yú）移动设（shè）备，设计和（hé）实现的时候注意增加手势的功（gōng）能（néng）。

屏幕尺寸：包括各种手机屏幕的尺寸（包括横（héng）向（xiàng）和竖向（xiàng））、各种平板的尺寸（包括横（héng）向和竖向）、普通电脑屏幕和宽屏。

需要（yào）考虑的问题：

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