前端布局方案有以下几种：
- 固定布局
- 百分比布局/流式布局
- 响应式布局
- 弹性布局/flex布局
- Grid布局/二维布局（目前前端布局的发展方向）
- 定位布局
- 浮动布局
固定布局
固定布局是最简单的布局，也是小白上手最快的布局，直接设置宽度值和高度值进行布局，不需要考虑是否跟随屏幕大小变化的布局方案，最能展现出网页设计的原始效果。
布局单位：
一律采用px
优点：
上手快，布局简单，没有任何兼容性问题。
门户网站和企业网站更多会采用这种布局方案，因为他们的设备尺寸一般都是固定的。
缺点：
不会自适应屏幕大小。
高分辨率的设备，固定布局会留下很大的空白，会出现‘黄金比例’，‘三分定律’。综合平衡和其他的设计原则。
屏幕分辨率过小时会出现横向滚动条。
性能消耗： 由于一开始就写了固定宽高，所以是所有布局方案中消耗性能最小的
百分比布局/流式布局
百分比布局顾名思义就是采用数学中的百分比单位进行布局，不受窗口宽度的影响，通过百分比来限定布局元素，还可以根据客户端分辨率大小进行显示。
布局单位： %
优点：
页面布局根据屏幕分辨率进行适配但是整体布局结构不变。
缺点：
窗口比例缩小到百分之五十，布局结构会发生错乱，一般情况会搭配min-*或者max-*使用。
屏幕尺度跨度太大，在相对其原始设计过小或过大的屏幕上会比例失调。
性能消耗：
在所有方案中，我自认为是消耗性能最大的，比响应式布局还要消耗性能，因为每个设备的宽高不一样，浏览器需要进行大量的计算
响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，讲的是一个网站可以适用于多个设备，而不是为每个设备都写一套代码，这个概念是为了解决市面上手机移动浏览而诞生的。
布局单位：
媒体查询、rem、vw/vh
优点：
不同分辨率设备灵活变化，能够解决多设备显示适用的问题
缺点：
兼容各种设备工作量大，效率低
一定程度上改变原有的布局结构，用户体验差
这是一种折中的选择方案，多方面导致无法达到页面布局的最佳效果
性能消耗： 相对于百分比来说消耗还算比较小的，但是相当于固定布局消耗还是比较大
媒体查询
//媒体查询必须在head里面添加这一句代码防止屏幕被手动放大和缩小 <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"> //媒体查询代码一般min是从小到大 1=>10，max是从大到小 10=>1 //因为js代码是至上往下进行执行，如果执行了这句代码，下一句代码执行则会覆盖上一句代码 // @media 查询 必须指定设备 这里指定的是screen screen 屏幕宽度 也有其他属性 max 最大 min 最小 @media screen and (max-width:320px) { //屏幕视口不大于320触发 html { font-size: 12px; } body{ background: #000; } } @media screen and (min-width:320px) { //屏幕视口不小于320触发 html { font-size: 15px; } body{ background: blue; } } @media screen and (min-width:400px) { //屏幕视口不小于400触发 html { font-size: 18px; } body{ background: yellow; } } @media screen and (min-width:600px) { //屏幕视口不小于600触发 html { font-size: 24px; } body{ background: #ccc; } }
//媒体查询max查询代码 @media screen and (min-width:900px) { //屏幕宽度不小于900触发 html { font-size: 12px; } body{ background: #000; } } @media screen and (max-width:900px) { //屏幕宽度不大于900触发 html { font-size: 15px; } body{ background: blue; } } @media screen and (max-width:500px) { //屏幕宽度大小于500触发 html { font-size: 18px; } body{ background: yellow; } } @media screen and (max-width:400px) { html { font-size: 24px; } body{ background: #ccc; } }
rem单位
rem是相对于html根元素的大小，可以采用媒体查询的方式动态设置html根元素大小
vw/vh布局
vw和vh是相对有浏览器可视区域的宽度和高度，跟百分比有些类似，但又不同
| % | 大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等) |
| vw/vh | 相对于可视窗口的尺寸 |
响应式布局和百分比布局的区别： 响应式布局可以随着屏幕变化变化为多个布局格式，但是百分比从始到终都是一个模板
弹性布局/flex布局
弹性布局能和其他两种主要布局类型（固定宽度布局和百分比布局）结合使用。flex布局和em都可以叫做弹性布局。flex是css3的一个属性。
附上flex布局详链接：fiex布局点我
布局单位: em
优点：
常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。
如果结合其他布局方式，可以说是完美的，不过需要有一些需要考虑的。
缺点：
兼容性: 浏览器在 ie10 以上的可以考虑，ie10以下会出现兼容性问题，需要做兼容
性能
不怎么消耗性能，因为不需要他去计算，是通过css属性方式进去
em
em单位是相当于父级盒子来说的，因此得不到推广，rem和em相对于百分比来说比较灵活。
国人制作网页习惯用CSS强制定义字体大小，确保到每个设备上的效果一致，采用的都是绝对单位px。要是从网站易用性出发字体大小应该是可变的，一些眼睛视力比较弱的人需要放大字体去查看页面内容。然而现在占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外则非常重视网站的易用性，一部分外国网站已经使用em作为字体单位。
Grid布局/二维布局
Grid(网格)布局是一个二维布局是在基于网络上的布局系统。Flex布局改善了我们的布局方式，但它主要是为了解决一维布局，而不是复杂的二维布局。flex和grid能够协同工作且配合十分的好。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块
采用grid布局的元素，称为grid容器，简称“容器”。其所有直系子元素（直系子元素的子元素不包含在内）自动成为容器成员，被称为grid项目，简称“项目”。
优点：
可以让很多繁琐的布局变得简单，和flex结合使用更佳。
提高网页的规范性和可重用性，将页面模块的尺寸标准化，对于大型网站的开发和维护能大大节约成本。
能让整个网站各个页面的布局保持一致，增加页面的相似度。
缺点：
兼容性是它的一大痛点： 微信浏览器不兼容
性能
消耗性能较小，因为不需要他去计算，是通过css属性方式进去
定位布局
通过css定位属性进行定位，如子绝父相等等
浮动布局
浮动布局会脱离文档流，还需要清除浮动
.father:before,#father:after { content:"."; display:table; } .father:after { clear:both; } .father { *zoom:1; }
