布局方式

一、静态布局

静态布局就是传统的web设计，网页上的所有元素的尺寸一律使用px作为单位。
我觉得没啥好说的，就是静态页面而已。。。

二、流式布局

流式布局也叫百分比布局，因为网页中主要的划分区域的尺寸使用百分数。

1、优点

屏幕分辨率变化时，页面里元素的大小会变化，但是布局不变。

2、缺点

主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调

三、自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点

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

2、设计方法

使用 @media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局

创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。

1.布局特点

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2.设计方法

媒体查询+流式布局。通常使用 @media媒体查询和网格系统 (Grid System)配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS给单一网页不同设备返回不同样式的技术统称。

3、优点

适应pc和移动端，如果足够耐心，效果完美。

4、缺点

（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

五、弹性布局

1、布局概念

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。

2、优点

简单、方便、快速

3、缺点

CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

六、总结

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。