vue移动端H5适配方案-rem布局

废话不多说，直接上代码

js代码

<script>
  (function () {
    // 在标准 375px 适配下，100px = 1rem;
    let baseFontSize = 100;
    let baseWidth = 375;
    let set = function () {
      let clientWidth = document.documentElement.clientWidth || window.innerWidth;
      let rem = 100;
      if (clientWidth != baseWidth) {
        rem = Math.floor(clientWidth / baseWidth * baseFontSize);
      }
      document.querySelector('html').style.fontSize = rem + 'px';
    }
    set();
    window.addEventListener('resize', set);
  }());
</script>

vue页面代码

<template>
    <div>
      <div>rem布局</div>
      <el-input class="my-input" v-model="name" placeholder="Please input" />
      <div class="shop-item">
        <div class="tag">
          06:15 10:00 <span class="tag-tip">开售</span>
        </div>
      </div>
      <el-button class="font20" type="primary" @click="submit">测试</el-button>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const name = ref("阿斯顿");
const submit = () => {
    name.value = "submit 测试按钮";
};
const nameRef = ref(null);
onMounted(() => {
    console.dir(nameRef.value);
});
</script>
<style lang="scss" scoped>
.my-input {
  font-size: 0.12rem;
  width: 3.4rem;
  height: 0.24rem;
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
.shop-item{
  width: 3.47rem;
  height: 3.47rem;
  background-color: #757171;
  margin: 20px auto;
  position: relative;

  .tag{
    position: absolute;
    left: 0;
    top: 20px;
    width: 1.23rem;
    height: 0.22rem;
    line-height: 0.22rem;
    background-color: #409eff;
    border-radius: 0 0.1rem 0.1rem 0;
    font-size: 0.14rem;
    display: flex;
    justify-content: center;
    .tag-tip{
      font-size: 0.08rem;
      padding-left: 0.05rem;
    }
  }
}
</style>

看效果：

一、375*667设备效果

二、414*896设备效果

三、768*1024设备效果