使用 rem 布局 实现H5页面自适应

第一步
建立 resetSize.js

function setHtmlFontsize() {
  const htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
  const html = document.getElementsByTagName("html")[0];
  html.style.fontSize = htmlwidth / 37.5 + 'px';
}
setHtmlFontsize();

第二步
在 main.js 文件中引入 resetSize.js

import './assets/js/resetSize.js'

第三步 使用

<template>
  <div class="home">
    <div class="box"></div>
  </div>
</template>

<style lang="less" scoped>
.box{
  width: 10rem;
  height: 10rem;
  background-color: aqua;
}
</style>