web 端 vite 配置 px 转 rem

web 端 vite 配置 px 转 rem

  • 下载插件 postcss-pxtorem

    npm install postcss-pxtorem -D

  • 在 vite.config.ts 中配置

    js 复制代码
    const postCssPxToRem = require("postcss-pxtorem");
    
    export default defineConfig({
      css: {
        postcss: {
          plugins: [
            postCssPxToRem({
              // 换算基数,
              rootValue: 16,
              //允许REM单位增长到的十进制数字,小数点后保留的位数
              unitPrecision: 5,
              propList: ['*'],
              //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
              exclude: /(node_module)/,
              //(布尔值)允许在媒体查询中转换px。
              mediaQuery: false,
              //要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
              selectorBlackList: ['.van'],
              //设置要替换的最小像素值
              minPixelValue: 1,
            }),
          ],
        },
      }
    })
  • 根据设计稿编写自适应脚本

    js 复制代码
    /******** src/utils/rem.js ********/
    
    const baseSize = 16;
    // 设置 rem 函数
    
    function setRem() {
      // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 704;
      // 设置页面根节点字体大小
    
      document.documentElement.style.fontSize =
      baseSize * Math.min(scale, 2) + 'px';
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem();
    };
  • 在 .vue 文件中引入 rem.js 文件

    js 复制代码
    import '@/utils/rem.js'
  • 在浏览器控制台中查看是否转换成功

相关推荐
sunbyte2 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常4 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常5 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10189 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28116 分钟前
Chrome插件开发
前端
前端 贾公子28 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端