vue3移动端适配

1.安装插件

• 安装 npm i amfe-flexible postcss-pxtorem -S
• amfe-flexible：用于设置根字体大小的
• postcss-pxtorem：用来自动转换单位的

2.设置根字体大小和单位转化

• 在根目录创建一个.postcssrc.js
  
  image.png

具体代码如下

      module.exports = {
        plugins: {
          "postcss-pxtorem": {
            rootValue: 75, // 具体值根据项目UI实际情况，默认給37.5
            propList: ["*"],
          },
        },
      };

• 在main.js文件中，导入import 'amfe-flexible/index'

  
  
  image.png

3.简单案例

测试代码如下

<template>
  <div>
    <div class="box">
      <span>我是测试代码</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 body {
  .box {
    width: 750px;
    height: 750px;
    line-height: 100px;
    background-color: pink;
    span {
      font-size:24px;
    }
  }
}
</style>

image.png