在设计中经常遇到这几个问题：
1.想要网站兼容手机、平板电脑、pc，就（jiù）得为不同的设备定制不同的版（bǎn）本。
2.想要网站（zhàn）的某（mǒu）些页面在宽屏显（xiǎn）示器下一行显示更（gèng）多的内（nèi）容，又得为宽屏定制一个（gè）版本。
3.很多人并不是在全屏的情况下浏览我们的（de）页面（miàn），如果让页面随着浏览器宽度（dù）改变而相应的调整会不（bú）会比较好？
有没（méi）有办法能有效解决这些问题呢（ne）？
响（xiǎng）应（yīng）式Web设计(Responsive Web design)的理念是页面的设计与开发应（yīng）当根据设备环境（屏幕（mù）尺（chǐ）寸、屏幕定向（xiàng）、系统平台（tái）等）以及用户（hù）行（háng）为（改变窗口大小（xiǎo）等）进行相应的（de）响（xiǎng）应和调整。具体的实践方式由（yóu）多方面组成，包括弹性网格和布局、图片、CSS media query的使用（yòng）等。无论用户正在使用pc、平板电（diàn）脑（nǎo），或（huò）者（zhě）手（shǒu）机，无（wú）论（lùn）是全屏显示还是非全屏的情况，无论屏幕是横向还（hái）是竖向，页面都应该（gāi）能（néng）够自动切换（huàn）分（fèn）辨率、图片（piàn）尺寸（cùn）及相关脚本功能等，以适应不同设备。
响应式web设计对交互（hù）设计和前（qián）端实现提出（chū）了（le）更高的要求，需要考虑清楚不同（tóng）分辨率下页（yè）面的布局变（biàn）化、内（nèi）容的缩放等（děng）。
响应（yīng）式Web设（shè）计的（de）优势：
•开（kāi）发、维护（hù）、运营成本优势：页面只有（yǒu）一（yī）个，只（zhī）是（shì）针对不同（tóng）的分辨（biàn）率、不同的设备环境进行了一些不（bú）同的设计，所以在（zài）开发、维（wéi）护和运营上，相对多个版本，能节约成（chéng）本。
•兼容性优势（shì）：移动设（shè）备新的尺寸层出不穷，定制的版本通（tōng）常只适用于某些规格的设备，如果（guǒ）新（xīn）的设备分辨率变（biàn）化较大，则（zé）往往不能兼容，而开发新（xīn）的版本需要时间（jiān），这段（duàn）时间内的访问就是个问题，但是响（xiǎng）应式Web设计可以提前预防（fáng）这个（gè）问题。
•操作（zuò）灵活：响应（yīng）式设计是（shì）针对页面的，可以只（zhī）对必要（yào）的（de）页面（miàn）进（jìn）行改动，其他（tā）页面不受影响（xiǎng）。
当浏览器宽度变小时，左（zuǒ）右两栏的宽度都有缩小，左边的banner图片和视频也（yě）相应缩小，右边的头像列表由一排（pái）4个变为一（yī）排两个（gè）。
当浏览器宽度进一（yī）步变小后，页面由两栏结构变（biàn）为（wéi）一栏结构，部分内容的尺（chǐ）寸进一步缩小，搜索区域也（yě）从导航里挪到了（le）导航外。
响应式页面的（de）设（shè）计流程
第一步（bù）：确定（dìng）需要兼容的设备类型、屏幕尺寸（cùn）
通过用（yòng）户研究，了解用户使用（yòng）的设（shè）备分布情况，确定需要兼容的设（shè）备（bèi）类型、屏（píng）幕（mù）尺寸。
设（shè）备类型：包括移动设备（手机、平板（bǎn））和pc。对于移（yí）动设备，设计和实（shí）现的时候注意增加手势的功能。
屏（píng）幕尺寸：包（bāo）括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包（bāo）括横向和（hé）竖向）、普通电脑屏幕和宽屏。
需要考虑的问题：
•某个页面进行响应式设计时（shí）其（qí）适用（yòng）的尺寸范围是哪些？比如，1688搜（sōu）索结果页面，跨度可以从（cóng）手机到宽屏，而1688首页，由于结构过（guò）于复杂（zá），想直（zhí）接迁移到手机上，不太现实，不如直接设（shè）计一个手机版的首页。
•结合用户需求和实现成（chéng）本，对适用的尺寸进行取舍。比（bǐ）如一（yī）些功能操作（zuò）的页面（miàn），用户（hù）一般没有（yǒu）在移动（dòng）端进行操作（zuò）的需求，没有必要进行响应式设计。
第（dì）二步（bù）：制作（zuò）线框原型（xíng）
针对（duì）确（què）定下来的几个尺（chǐ）寸（cùn）分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容（róng）尺寸如何缩（suō）放，功能、内容的删（shān）减，甚至针对特（tè）殊的环境作特殊化的设计等。这个过程（chéng）需要设计师和前（qián）端开发人员保持（chí）密（mì）切的（de）沟通。
|
