什么是响应式布局网站设计？

响应式布局是伊桑·马科特Ethan Marcotte在2010年5月份提出的一个概念，是一个网站能够兼容多个终端设备的解决方案。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

响应式布局设计就是网页会根据分辨率大小调整网页结构版式，使其能够被友好阅读。我们可以通俗的理解为，响应式布局设计就是指将桌面设备上的网页内容在移动设备上进行优化排版，使用户能够在移动设备上更方便地阅读并操作，是针对PC端、平板端、移动端的网站的自适应设计方案。

响应式布局设计的四个层次

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

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

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

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

响应式布局设计的基本规则

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

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

3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化

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

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

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

7、放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。