纯移动端|PC端
这种适用于只适用一个端的情况
方法：amfe-flexible + postcss-pxtorem相结合
① 执行以下两个命令
npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev
② main.js文件引用
import 'amfe-flexible'
③ 根目录新建一个postcss.config.js文件，文件内容如下：
// postcss.config.js
module.exports = {plugins: {'postcss-pxtorem': {rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，rootValue 以设计稿除以10来设置},propList: ['*'], // 需要转换的css属性，默认*全部}}
}
到这里就安装完成了，重新运行项目就可以在浏览器看到变化了
移动端+PC端
这种可用于一套UI或两套UI适配于移动端及PC端的情况
① 新建个js文件，我放在src平级下新建utils–rem.js文件
import store from '@/store/index'
// 获取是否为手机端
const isMobile = () => {const 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
}
export function setRem() {// 获取页面的宽度const deviceWidth = document.documentElement.clientWidth// 手机端 （768可自己调整）if (deviceWidth<=768){if (store) store.commit('setDevice', 'mobile') // 我这边基本每个页面都需要用到，所以存到vuex，你们可按照自己实际项目来document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px' // 我这里是按照100px来的，3.75：设计稿宽度（375）/100} else {// 电脑端if (store) store.commit('setDevice', 'pc')document.documentElement.style.fontSize = deviceWidth / 14.4 + 'px'}
}
setRem()
② 页面调用
<template><div class="title">你好世界</div>
</template>
<script setup>
import { computed,onMounted} from 'vue'
import { useStore } from 'vuex' // vuex
import { setRem } from '@/utils/rem.js' // 引入文件
import { debounce } from 'throttle-debounce' // 用于防抖的const store = useStore()
onMounted(() => {window.onresize = debounce(500, () => {setRem()const device = computed(() => store.state.device) // 设备信息获取console.log(‘当前设备为’, device.value) // 拖拽项目可看到值变化}, { atBegin: false })
})
</script>
<style lang="scss" scoped>
.title{font-size: 0.14rem;
}
</style>
这里就配置完了，如果有用到组件库的需要自己去单个适配下了
我这边移动端375设计稿字体大小为14px，PC端1440设计稿字体大小为14px
