前端常见的布局方案大全

1、静态布局(Static Layout)

1. 布局概念

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,全部的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

2. 优势

采用的是css2以前的写法,不存在浏览器兼容性。布局简单。

3. 缺点

可是移动端不可使用pc端的页面,两个页面的布局不一致,移动端须要本身另外设计一个布局并使用不一样域名呈现。

4. 实现方法

<b>PC端:</b>
最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。
例如百度首页外层body设置了一个min-width:1000px;,当我打开调试器的时候,底部<b>x轴滚动条</b>就出现了。

固然,它的布局比普通的静态布局要复杂地多了,好比推荐模块又是一个流式布局....

<b>移动端</b> 因为静态布局不适用于手机端,因此通常都会另设计一个布局,并使用另外一个域名。 例如刚刚百度的PC端咱们切换成手机模拟器访问试试:

确实有点丑是吧。

咱们访问一下百度的手机端页面:m.baidu.com

舒服！

再看一下最近比较'火'的京东的案例:分别访问

• jd.com
• m.jd.com

能够发现:
PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条
移动端限制了最大的宽度, 超过了则以最大宽度居中显示

2、流式布局(Liquid Layout)

1. 布局概念

流式布局也叫百分比布局

这边引入一下<b>自适应布局</b>:
分别为不一样的屏幕设置布局格式，当屏幕大小改变时，会出现不一样的布局，意思就是在这个屏幕下这个元素块在这个地方，可是在那个屏幕下，这个元素块又会出如今那个地方。只是布局改变，元素不变。能够当作是不一样屏幕下由多个静态布局组成的。

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

<b>流式布局经常使用的设计模板:</b>
左侧固定+右侧自适应
左右固定宽度+中间自适应(参考<a href="m.jd.com" target="_blank">京东手机版</a>)

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

2. 优势

元素的宽高用百分比作单位，元素宽高按屏幕分辨率调整，布局不发生变化

3. 缺点

屏幕尺度跨度过大的状况下，页面不能正常显示。

3、弹性布局(Flex Layout)

1. 布局概念

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

2. 优势

简单、方便、快速

3. 缺点

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

4. 实现方法

<b>flex-flow:</b> <flex-direction> || <flex-wrap>

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

<b>flex-direction:</b> row（初始值） | row-reverse | column | column-reverse

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

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

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

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

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

<b>flex-wrap:</b> nowrap（初始值） | wrap | wrap-reverse

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

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

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

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

二者结合起来即flex-flow属性就肯定了弹性容器在main axis和cross axis两个方向上的显示方式

自适应布局（Adaptive）的特色是分别为不一样的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每一个布局中，页面元素不随窗口大小的调整发生变化。 你能够把自适应布局看做是静态布局的一个系列。 就是说你看到的页面，里面元素的位置会变化而大小不会变化。

4、响应式布局(Responsive layout)

采用自适应布局和流式布局的综合方式，<font color="red">为不一样屏幕分辨率范围建立<b>流式布局</b></font>

如今优秀的页面都追求一套代码能够实现三端的浏览;
从概念能够看出来,自适应布局的诞生是为了实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。

经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不同展现给用户的网页内容也不同.

利用<b>媒体查询</b>能够检测到屏幕的尺寸(主要检测宽度)，并设置不一样的CSS样式，就能够实现响应式的布局。

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

官方放出狠话:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。它包含了易于使用的预约义类，还有强大的mixin 用于生成更具语义的布局。

连咱们最热爱的React官方也热衷于响应式布局设计: <a href="https://www.reactjscn.com/" target="_blank">《React官方网站》</a>

手机端下的React页面:

5、总结一波

以上四种就是经常使用的前端布局方案啦，布局并不惟一。灵活应用就能构建出优秀的网站