什么是响应式设计

一、概念

响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。

二、设计方法

设计师：将网页中的元素分模块设计，针对不同的屏幕，调整出不同的布局。现在流行一种「移动优先」的策略，也就是说先行设计移动端的样式，然后再扩展成为PC端样式，因为移动端的样式相对简单，渐进增强为PC端样式，更为平滑。

前端工程师：将设计狮设计的不同布局，写成CSS文件，适配到不同的分辨率下。同时，他还要使用资源查询（Media Queries）根据不同的分辨率，拉取不同尺寸的资源，以加快页面的加载速度，并且减少流量的消耗。

三、响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

四、响应式设计的要点

1、可伸缩的内容区块，内容区块的在一定程度上能够自动调整，以确保填满整个页面。

2、可自由排布的内容区块，当页面尺寸变动较大时，能够减少/增加排布的列数。

3、适应页面尺寸的边距。

4、能够适应比例变化的图片，对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用。

5、能够自动隐藏/部分显示的内容，如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏。

6、能自动折叠的导航和菜单，展开还是收起，应该根据页面尺寸来判断。

7、放弃使用像素作为尺寸单位，用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。

——部分内容整理自网络——