使用vue，pc, 移动端 全设备适配方案

需求：

        pc端、移动端不同尺寸切换，展现不同样式，并自适应。

解决方案：

媒体查询 + 自定义rem.js + postcss-pxtorem插件

第一步：媒体查询

        主要用来区分PC端与移动端。

const width = document.documentElement.clientWidth
                    // 先判断 UA 是否为移动端设备（手机&平板）
                    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                        this.mode = 'mobile'
                    } else {
                        // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
                        if (width < 992) {
                            this.mode = 'mobile'
                        } else {
                            this.mode = 'pc'
                        }
                    }
document.body.setAttribute('data-mode', this.mode)

第二步：自定义rem.js

        网上的插件不能动态修改设计稿宽度，导致rem计算的差别比较离谱。

        我这里通过第一步得到的mode，来判断使用哪个设计稿类型。

/******** src/utils/rem.js ********/
const baseSize = 16;

// 设置 rem 函数
export function setRem(mode) {
    const uiWidth = mode == 'pc' ? 1920 : 375
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / uiWidth;
    // 设置页面根节点字体大小

    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + 'px';
}

        这一步配置完，已经可以看到不同尺寸下，html的 font-size动态改变了。

第三步：添加postcss-pxtorem插件

        它的作用是把px自动转为rem，我们按照设计稿给的尺寸直接写就行。

        我用的是vue3+vite。

1.  在vite.config.js里，引入插件。const postCssPxToRem = require("postcss-pxtorem");

2. 这个位置下添加配置。

3. plugins: [
                       // 配置rem
                       postCssPxToRem({
                           // 换算基数，
                           rootValue: 16,
                           //允许REM单位增长到的十进制数字,小数点后保留的位数
                           unitPrecision: 5,
                           propList: ['*'],
                           //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                           exclude: /(node_module)/,
                           //（布尔值）允许在媒体查询中转换px。
                           mediaQuery: true,
                           //要忽略并保留为px的选择器，本项目我是用的elementpLus ui框架，所以加了.el，你可以自己配
                           // selectorBlackList: ['.el'],
                           //设置要替换的最小像素值
                           minPixelValue: 1,
                       })
                   ]

   第四步：重启项目