npm i lib-flexible?
npm i postcss-pxtorem@5.1.1

//vue.config.js
const pxtorem = require('postcss-pxtorem')
module.exports = {
? ? css: {
? ? ? ? loaderOptions: {
? ? ? ? ? ? postcss: {
? ? ? ? ? ? ? ? plugins: [
? ? ? ? ? ? ? ? ? ? pxtorem({
? ? ? ? ? ? ? ? ? ? ? ? rootValue: 80, ?//這里設(shè)置參考"設(shè)計(jì)稿大小"和自己認(rèn)為"合適的劃分比例"（例：1920/24 = 80)
? ? ? ? ? ? ? ? ? ? ? ? propList: ['*'],
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

import 'lib-flexible'

function refreshRem(){
? ? var width = docEl.getBoundingClientRect().width;
? ? //這里代表適配744~5760寬度的屏幕視圖，可以按需修改
? ? if (width / dpr < 744) {
? ? ? ? width = 744 * dpr;
? ? } else if (width / dpr > 5760) {
? ? ? ? width = 5760 * dpr;
? ? }
? ? //這里width的相除值需要和前面vue.config.js文件下rootValue的相除值相同
? ? var rem = width / 24;
? ? docEl.style.fontSize = rem + 'px';
? ? flexible.rem = win.rem = rem;
}

import { onMounted } from "vue";
// 判斷客戶端設(shè)備
const _isMobile = () => {
? ? let flag = navigator.userAgent.match(
? ? ? ? /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
? ? );
? ? return flag;
};
// "移動(dòng)端"手動(dòng)添加 mate 標(biāo)簽函數(shù)
const addMeta = (name, content) => {
? ? const meta = document.createElement("meta");
? ? meta.content = content;
? ? meta.name = name;
? ? document.getElementsByTagName("head")[0].appendChild(meta);
};
// 渲染頁面配置 mate 標(biāo)簽?
export default function adaptive() {
? ? onMounted(() => {
? ? ? ? if (_isMobile()) {
? ? ? ? ? ? console.log("手機(jī)");
? ? ? ? ? ? addMeta("viewport", "user-scalable=yes");
? ? ? ? } else {
? ? ? ? ? ? console.log("pc");
? ? ? ? }
? ? });
}

<script>
import adaptive from './utils/adaptive.config';
export default {
? setup() {
? ? adaptive()
? },
}
</script>