vue手动添加rem移动端适配

添加rem

项目下新建rem.js文件内容为：

(function () {

    function resize() {
        var baseFontSize = 100; //设计稿100px相当于1rem
        var designWidth = 750;//设计稿宽度
        var width = window.innerWidth;//获取屏幕宽度
        var currentFontSize = (width / designWidth) * baseFontSize;//
        document.querySelector('html').style.fontSize = currentFontSize+'px';//html的真实数值
    }

    window.onresize = function () {
       resize()
    }
    
    document.addEventListener('DOMContentLoaded',resize)

}())

main.js里边引用rem：import '@/api/rem'，api为存放rem.js的文件夹

调用

<h1 class="h1">Home</h1>

.h1{
  background: chartreuse;
  width: 3.75rem;
  height: 1rem;
  font-size: 0.16rem;
  text-align:center;
  vertical-align:middle;
  display: table-cell;
}

是不是比其他方法简单了许多呢？