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

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

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

3.很多人并（bìng）不（bú）是在（zài）全（quán）屏的情况下（xià）浏（liú）览（lǎn）我（wǒ）们的（de）页面（miàn），如果（guǒ）让页面随着浏（liú）览器（qì）宽度改（gǎi）变而（ér）相应的（de）调整（zhěng）会不会比（bǐ）较好？

有（yǒu）没有办（bàn）法（fǎ）能有效（xiào）解决这些问题呢？

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

响应式web设计对交互设计和前端实现提出了更高的要（yào）求，需要考虑（lǜ）清楚不同分辨率下页面的布局变化、内容的缩（suō）放等。

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

 

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

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

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

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

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

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

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