纯移动端|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
