网站前端布局方式之：前端自适应布局

的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把看作是静态布局的一个系列，网页通过媒体查询的方法自动选择相对应的CSS样式。

1.自适应布局特点
，屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。根据不同的屏幕分辨率切换不同的布局样式，使整个网页看起来与使用的设备完美匹配。

2.自适应布局设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

3.自适应布局的缺点
优点很完美，缺点也很明显。一般会根据不同的主流屏幕做多个媒体查询，这样往往会增加CSS样式的书写复杂程度，同时，一旦网页布局发生改动后期维护工作量相当之大。