几种布局区别
https://blog.csdn.net/sunday97/article/details/84591190
先明白视口和像素是什么
https://www.cnblogs.com/webxu20180730/p/9562543.html
1. 流式布局
什么是流式布局？开发思路如何？
一个典型的案例（http://m.duba.com/）用浏览器控制台调控尝试一下吧
适用页面特点：左侧固定+右侧自适应 左右固定宽度+中间自适应（专业一点说法：关键元素高宽和位置都不变，只有容器元素在做伸缩变换）
开发思路：
*1. 多列等分 -> 百分比等分
- 左侧固定宽度 + 右侧自适应宽度
思路一 -> 左侧左浮动+右侧利用BFC特性在右侧
思路二 -> 父级给padding-left，预留出来左侧区域的宽度，左侧用绝对定位上去，右侧用百分百宽度 - 左侧自适应 + 右侧固定宽度
思路一 -> 左侧用百分百宽度,右侧用绝对定位上去 - 左右固定宽度 + 中间自适应
思路一 -> 左侧左浮动 + 中间百分之百（中间部分再分为左侧百分之百+右侧右浮动）
思路二 -> 左侧左浮动 + 中间百分之百 + 右侧右浮动 （负margin法减掉左右侧）
思路三 -> 左右绝对定位 + 中间百分之百（父元素padding-left,padding-right预留左右侧的位置） - 左中右全自适应 -> 全部用百分比
- font-size、padding,margin,height直接量像素
- 小的地方可以用display:inline-block;让几个容器放在一排
- 小图标之类的，可以考虑用::before,::after来实现*
它的缺陷
在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的！
2. VW布局
这个多和rem联系在一起
https://www.cnblogs.com/SRH151219/p/10407609.html
http://caibaojian.com/vw-vh.html
https://juejin.im/post/5caaa230e51d452b672f9703#heading-9
3. 栅格布局
https://juejin.im/entry/58c3d8bdda2f6056096b2b40
复杂点会涉及到一些框架、简单的就结合媒体查询
4. flex
https://www.cnblogs.com/qcloud1001/p/9848619.html
https://www.cnblogs.com/dreamperson/p/9367008.html
其他布局参考链接
Rem布局: http://caibaojian.com/web-app-rem.html
