rem兼容安卓手机（vue）

当设计图是750的图，只需要在页面中100px相当于1rem，所有的尺寸除100就可以了，30px=0.3rem

1、创建一个resize.js文件

//resize.js

export function resize () {

var htmlEle = document.documentElement;

var htmlWidth = window.innerWidth;

if (!htmlWidth) return;

if (htmlWidth >= 750) {

htmlEle.style.fontSize = '100px';

} else {

htmlEle.style.fontSize = 100 * (htmlWidth / 750) + 'px';

}

}

2、创建一个rem.js

//rem.js

window.onload = function () {
  getRem(750, 100)
};
window.onresize = function () {
  getRem(750, 100)
};
function getRem (pwidth, prem) {
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth / pwidth * prem + "px";
}
//安卓手机不支持window.onresize
window.addEventListener('resize', () => { getRem(750, 100) });
window.addEventListener('onload', () => { getRem(750, 100) });

3、在使用rem的页面中引入, 

import { resize } from '@/resize';
import "./rem"；

created () {
    resize()
  },

 

 4、或者在main.js中引入  import "./rem"，
在main.js中引入就是全局引入，不需要单独页面使用