积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里，不积小流无以成江海。齐骥一跃，不能十步，驽马十驾，功不在舍。面对悬崖峭壁，一百年也看不出一条裂缝来，但用斧凿，能进一寸进一寸，能进一尺进一尺，不断积累，飞跃必来，突破随之。

目录

可参考博客：

• Vite+Vue：https://blog.csdn.net/weixin_43554584/article/details/121345084
• https://blog.csdn.net/zhao1239902/article/details/122965063
• https://blog.csdn.net/xyphf/article/details/89338348

本文使用的是Vite+Vue。

导入依赖

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

配置

在main.js中进行引入：

import 'amfe-flexible'

再添加配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // 1rem的大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          exclude: /web/i, //忽略web下的所有文件
          selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
        })
      ]
    }
  },
})

其他

其他相同，就只是把amfe-flexible进行替换。

npm install lib-flexible --save-dev

再修改配置：

import 'lib-flexible'

自行测试发现，这种效果在PC、移动端都要好一些。（外观）

失效设置

如果想在ios，ipad，iPod设备上无效（适配失效），则可以在index.html中添加如下代码：

<script>
  /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

配置PC自适应

修改flexble.js,（npm安装的位置在项目的node_modules/lib-flexble/），建议拉出来单独引用。

修改前：

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 > 770) { //大于770像素时，改变自适应策略，改成手机设计稿大小
            width = width * dpr / 5.12; 
            //520改成width 以pc上也能自适应
            // 5.12(pc设计稿除以手机，1920/350=5.12)，如果只写电脑 就不需要加
            //因为rem设置的是手机的设计稿换算的，只能在font-size上动手脚
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }