移动端适配：

1.viewport适配

不论设备宽度是多少，统一把布局视口设置成设计稿的宽度。假设设计稿宽度是375px。
①.<meta name=“viewport” content=“width=375px”>
不管屏幕多大，都看作375px。width只能改变布局视口，不能改变视觉视口。
②.<meta name=“viewport” content=“width=device-width, initial-scale=1.0” id=“meta”>
定义设计稿的宽度->计算当前设备的宽度document.documentElement.offsetWidth->scale = 设备宽度/设计搞宽度->获取meta元素->设置meta中的content的inital-scale->meta.content = ‘initial-scale=’+scale+’,maximum-scale=’+scale+’,minimum-scale=’+scale;
存在问题：没有理想视口，图片的1X，2X都一样了。

2.rem适配

①.用meta标签设置为理想视口。
html {font-size: 100px;}
此后的所有像素都用rem表示，如果量出来是28px，换成rem就是.28rem。
用js设置根元素字体的大小，以适应不同的屏幕。
定义设计稿的宽度->计算当前设备的宽度->scale = 设备宽度/设计稿宽度->设置当前设备下根元素的字体大小document.documentElement.style.fontSize = (100 * scale) + ‘px’;
存在问题：理想视口还在，用100px精确计算可能有问题。
②.rem适配配合less
在less中定义@rem:375/12rem;如果量出来的是28px，就写成28/@rem。
在html中引入css文件，定义设计稿的宽度->计算当前设备的宽度->scale = 设备宽度/设计稿宽度->设置根元素字体大小fontSize ，用设计稿的宽度/12->设置当前设备下根元素字体大小document.documentElement.style.fontSize = fontSize * scale + ‘px’;