还在纠结前端的布局方式嘛

一、静态布局

1、布局概念

最传统、原始的Web布局设计。网页最外层容器有固定的大小，所有的内容都是以该容器为标准，超出宽高的话用滚动条实现（overflow:hidden）来实现滚动

2、优点

采用的是css2之前的写法，不存在浏览器兼容问题。布局简单

3、缺点

但是移动端不支持使用pc端的页面，两个页面的布局不一致，移动端需要自己另外自己设计一个布局并使用不同的域名来呈现

4、实现方法

最外层居中，使用固定的宽高，超出部分用滚动条
例如百度首页外层的body设置了一个min-height:1000px，当我打开调试器的时候，底部x轴的滚动条就出现了

移动端
由于静态布局不适用于手机端，所以一般都会另外设计一个布局，并且使用另外一个域名

二、流式布局

1、布局概念

流式布局也叫做百分比布局。
这边引入一下自适应布局：
分别为不同的屏幕设置布局格式，当屏幕大小改变的时候，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在另外一个屏幕下，这个元素块又会出现在另一个地方，只是布局改变，元素不变，可以看成是不同屏幕下由多个静态布局组成。

而流式布局的特点就是随着屏幕而改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

流式布局常用的设计模板：
左侧固定+右侧适应
左右固定+中间自适应（参考京东手机版）

页面元素的宽度是按照屏幕进行适配调整，主要的问题就是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。你看到的页面元素的大小会变化而位置不会变化-这就导致了如果屏幕太大或者太小都无法正常显示。

2、优点

元素的宽高用百分比做单位，元素的宽高根据屏幕的分辨率进行调整，布局不发生变化

3、缺点

屏幕尺度跨度过大的情况下，页面无法正常显示

三、弹性布局

1、布局概念

弹性布局是css3引入的强大的布局方式，用来替代以前web开发人员使用的一些复杂易错的方法（比如：float实现流式布局）

2、优点

简单、方便、快速

3、缺点

css3新特性，浏览器兼容性会非常头疼，而且手机版对flex支持也不理想

4、实现方法

flex-flow: ||

flex-direction和flex-wrap的简写,在两者选其一。

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。

row:主轴为水平方向，项目沿主轴从左至右排列

column：主轴为竖直方向，项目沿主轴从上至下排列

row-reverse：主轴水平，项目从右至左排列，与row反向

column-reverse：主轴竖直，项目从下至上排列，与column反向

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

nowrap：自动缩小项目，不换行

wrap：换行，且第一行在上方

wrap-reverse：换行，第一行在下面


自适应布局的特点就是分别在不同的屏幕分辨率下分别为不同的屏幕分辨率定义布局。布局切换的时候页面发生改变，但是在每个布局当中，页面元素不随窗口大小的调整发生变化。你可以把自适应布局当作是静态布局的一个系列。就是说你看到的页面，里面元素的位置会变化但是大小不会变化

四、响应式布局

采用流式布局和响应式布局的方式，为不同的分辨率范围创建流式布局
现在优秀的页面都追求一套代码实现三端的浏览：
自适应布局的诞生是为了解决不同屏幕分辨率下终端上浏览网页的不同展示方式。

利用媒体查询可以检测到屏幕的尺寸，并且设置不同的css样式，就可以实现响应式布局。

大名鼎鼎的bootstrap就是响应式布局的专家。

Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或者视口尺寸的增加，系统自动分为最多12行，它包含了易于使用的与定义类，还有强大的mixin用于生成更具语义的布局