一看就会的自适应布局、响应式布局的基本概念

一、自适应布局

定义：自适应布局、又称宽度百分比布局或者流式布局。

优势：在不同的设备上呈现相同的网页

弊端：在不同的设备上呈现相同的网页，对页面进行压缩。

二、响应式布局

定义：根据不同的设备显示不同的页面。

优点：

• 不同分辨率设备灵活性强,[比自适应强，自适应只是宽度的自适应]

• 多终端视觉和操作体验好

• 响应式web设计中的大部分技术都可以用在WebApp开发中[可以用在移动端设备，也可以用在pc端

缺点：

• 兼容各种设备工作量大，效率低下

• 代码累赘，会出现隐藏无用的元素，加载时间加长

三、自适应布局与响应式布局的区别

• 响应式的概念覆盖了自适应，但是包括的东西更多。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局

• 自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，也会感觉在小屏幕上查看，内容过于拥挤

• 响应式解决了自适应布局的问题。它可以自动识别屏幕宽度、并做出相应调整，布局和展示的内容可能会有所变动