bootstrap常用的几种布局

一、静态布局（Static Layout）: 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

2、优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

3、缺点：不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

2、优点：这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。

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

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

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

四、响应式布局（Responsive Layout）：静态+流式+自适应的设计理念的融合。

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

2、优点：适应pc和移动端，如果足够耐心，效果完美

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

五、弹性布局（rem/em布局）：使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。

1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。

2、优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

3、缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。