vue3.x移动端自适应

原文:

一、项目中安装lib-flexible

npm install lib-flexible -S

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

第二部分：使用postcss-px2rem自动将css中的px转换成rem

一、安装postcss-px2rem 

npm install postcss-px2rem -S

二、项目配置postcss

项目开始我是在vue.config.js（项目创建完初始是没有这个js文件的，需要自己手动创建）中配置的，上代码

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
             plugins: [
              require("postcss-px2rem")({
                remUnit: 75
          })
        ]
      }
    }
}

或者

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
};

或者

 package.json

"postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{ "remUnit": 75, "exclude":"/node_modules|floder_name/i" } } },

index.html

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

参考这2个博客