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'
  • 在浏览器控制台中查看是否转换成功

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart2 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.2 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu2 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss2 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师2 小时前
React面试题
前端·javascript·react.js
木兮xg2 小时前
react基础篇
前端·react.js·前端框架
ssshooter2 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘3 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai3 小时前
HTML HTML基础(4)
前端·html