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

相关推荐
云枫晖9 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate10 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰14 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6962 小时前
CSS-响应式布局
前端
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端