在设计中（zhōng）经（jīng）常（cháng）遇到这几个（gè）问（wèn）题（tí）：

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

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

3.很多人并不是在全屏的情况下浏览（lǎn）我们的页面（miàn），如果（guǒ）让页（yè）面（miàn）随着浏览器宽度改变（biàn）而相应的（de）调整会不会比较好（hǎo）？

有没有办法能有效解决这些问题呢？

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

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

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

 

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

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

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

设备类型：包（bāo）括移动设（shè）备（手机、平板）和pc。对（duì）于移动设备，设计和实现的时候注意增加手势的功能（néng）。

屏（píng）幕尺寸：包（bāo）括各（gè）种手机（jī）屏幕的（de）尺寸（包括横向和（hé）竖向）、各种平（píng）板的尺寸（包括（kuò）横向（xiàng）和竖向）、普通电脑屏幕（mù）和（hé）宽屏（píng）。

需要（yào）考（kǎo）虑的问题（tí）：

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