Vue3.0移动端适配自适应

1、安装 lib-flexible

npm install lib-flexible --save-dev

2、在main.js中引入lib-flexible

import {createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'// px2rem 自适应import 'lib-flexible'createApp(App).use(store).use(router).mount('#app')

3、更改 flexible.js 中的内容

文件路径 node_modules/lib-flexible/flexible.js

//更改之前function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

//更改之后function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

4、安装 postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save-dev

5、创建 postcss.config.js 并写入（和src同级）

module.exports={plugins:{autoprefixer:{browsers:'last 5 version'},'postcss-px2rem-exclude':{remUnit:72, //设计稿宽度/10exclude:/node_modules|folder_name/i}}}

6、重启项目就OK了