作为前端开发工程师，布局方式有多种，对于不同的场景可以使用不同的布局方式，但是很刚参加前端培训的同学对于这些不是很了解，那么我们就先来简单的来了解一下，那些前端开发必须了解的布局。

1.静态布局：

静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。

2.弹性布局：

css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；

3.自适应布局：

分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。

4.流式布局：

元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

5.响应式布局：

使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

在我们参加前端培训学习或者是做前端开发是做项目时要怎么区选择布局方式。

1.如果只做pc端，那么静态布局是最好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，这个时现在比较流行的方式。