学习笔记@逆战班
移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。四种布局都能很好的适应手机屏幕分辨率。
1 、流式布局：通过设置viewport可视窗口：
布局窗口等于可视窗口。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。流式布局优点是大屏幕下能显示更多内容，充分利用可视空间，使用户能在大分辨率的屏幕下获取更多信息。但是在相对较宽的比例下会有些不协调，屏幕显示的内容可能会不对称。
2、 rem布局
首先，1rem等于html标签的font-size值，rem布局就是通过在不同分辨率下html的font-size值的调节，适配不同的设备进行等比缩放。这时候又引进了一个新的单位“VW”，通过VW、rem、html的font-size值三个单位的转换，达到rem布局。屏幕分成100等份。1%等于1vw，根据iphone6、7、8下屏幕分辨率是375px，可得1vw == 3.75px，100px == 26.666667vw，所以设置html根元素的font-size值为26.666667vw，在iphone6、7、8下同样的100px等于100px，iphone6、7、8plus下屏幕分辨率为414px，1vw == 4.14px，4.14 * 26.666667 == 110.4px，所以在375px的屏幕分辨率下100px等于100px，而414px屏幕分辨率下100px等110.4px，不同分辨率下元素的大小也是等比缩放的，这就是rem布局。
3 、 响应式布局
响应式布局，简言之就是一套代码适应多种屏幕分辨率，适用小网站，页面转换不多的博客，小型活动介绍和企业简章等。
这种布局一定程度上简化了代码量，提高了代码的利用率，也减轻了前端工作量，页面切换美观，吸引眼球。
但是，由于一套代码要在移动端各种屏幕分辨率下切换，甚至还有可能切换到PC端，暴露了一个很大的劣势：网页承载量和功能需求要大打折扣，不适用大网站，大型开发工作。
4 、 弹性布局
高度定死，宽度自适应，元素都采用px做单位。
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在那个宽度需要调整的时候使用响应式布局调试就行（比如网易新闻），这就实现了适配。
来源：https://www.cnblogs.com/shiqinghuayi/p/12436852.html