前端布局的方式

前端布局的方式

1.静态布局：

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。采用的是css2之前的写法,不存在浏览器兼容性。布局简单。但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

2.弹性布局：

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

3.自适应布局：

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

4.流式布局：

元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。流式布局也叫百分比布局。流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

5.响应式布局：

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

6.Flex 布局:

可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。查看Flex 布局教程请打开以下网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html