移动端适配方案

flex + rem 单位 用来做适配效果  （比如淘宝和小米移动端） 当前市场最多

flex +viewport width / vh 单位 做适配效果 （比如B站的移动端）一个新的趋势

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

 静态布局：在meat标签中的viewport标签中设置width,通过js动态修改标签的initial-scale使得页面等比缩放，采用px为单位，不存在兼容问题，用户体验极差

流式布局：使用%定义宽度，高度使用px固定，通常使用max-width,和min-width来控制页面的最大宽度和最小宽度，实现很简单，但是在大屏幕手机或者切换横竖屏的模式下可能会造成元素拉伸变形字体大小无法根据屏幕大小发生变化

rem布局：将屏幕分成100等份，让元素随着屏幕的变化而等比缩放。以某个设备为标准，计算元素占据屏幕百分之几。

根据上面可以得出公式:

相对于屏幕的1%

 document.documentElement.fontSize = "width / 100";

计算元素占用屏幕的百分之几

元素rem = 元素的宽度 / ui图宽度 * 100

Vm/vh:

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw — 视口宽度的 1/100；vh — 视口高度的 1/100;

vw的缺点:
 在ios和安卓上存在兼容性问题，只适用高版本；

另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题

1. rem适配【视觉窗口+动态配置rem】

            1.视觉窗口

 

 

          2.动态配置rem

 

通过js获取设备宽度来动态设置font-size随着视口大小的改变而改变，流程如下：

1. 获得设计稿尺寸，如750px
2. 对设计稿标注进行转换
3. 需要等比缩放的使用rem，不需要缩放的，例如border阴影，则使用px

缺点

css与js代码具有一定的耦合性