你不知道的css各类布局（三）之自适应布局

自适应布局

概念

自适应布局（Adaptive Layout）是对凡是有自适应特性的一类布局的统称

自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位（px、pt、mm、cm、in），但不同点在于它通过media query为页面指定了多个固定宽度。

布局特点

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素的位置会变化但是大小不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

设计方法

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在同一个设备下实际还是固定的布局。（媒体查询 + 静态布局）

实例

注意 max-width：代表小于等于，min-width代表大于

优点

在对原始的静态布局页面升级时（比如支持手机端），自适应布局就是一种很好的折中方案。这要比直接重构为响应式的容易的多。

缺点

在不同的breakpoint(可以理解为分界点但，比如上面例子中的768, 769,1024,1025)里显示不够完美，总是会存在比较大或者比较小的额外空间，页面会显得很突兀。