Vue项目移动端适配

采用fontSize和rem来实现，1rem 相对根html的fontSize，例如，当你把html的font-size设置为100px，在其他子标签中设置1rem就等价于100px，2rem就等价于200px，0.1rem等价于10px，其他类推，我们的思路是在根html获取窗口大小，根据和初始编写环境（手机）比较，来对内容进行放大缩小，来设置根的html的font-size，就可以实现不同设备的适配。

整体代码:

index.html中代码：

//index.html
 <script>
    var width = document.documentElement.clientWidth || document.body.clientWidth;
    var ratio = width / 375;//375是初始编程的窗口大小
    var fontSize = 100 * ratio;
    document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
  </script>

main.js中代码(在全局使用)：

//main.js
import './style/index.scss'//设置rem

index.scss中代码：

//index.scss
@import './base.scss';

base.scss中代码：

/*base.scss*/
html {
    font-size: 100px
}
body {
    font-size: .12rem
}
/* 
1 rem = html fontSize
2 rem = 2 * 100px = 200px
*/

完成以上四步就可以实现适配。

Finish!!!