web 端 vite 配置 px 转 rem

web 端 vite 配置 px 转 rem

  • 下载插件 postcss-pxtorem

    npm install postcss-pxtorem -D

  • 在 vite.config.ts 中配置

    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,
            }),
          ],
        },
      }
    })
    
  • 根据设计稿编写自适应脚本

    /******** 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 文件

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite是一款前端构建工具,它支持自动将px成rem。pxrem的最大好处就是能够用更加灵活的方式进行移动页面的开发,不再需要通过屏幕尺寸去计算样式的适配问题。使用pxrem,我们只需要按照设计稿中的像素值编写样式,Vite会根据设备的像素密度和使用者设置的基准值自动将像素值换成相应的rem值。 Vitepxrem功能非常方便,只需要在项目中配置相应的参数即可。我们可以在Vite配置文件中加入如下配置: ```js // vite.config.js module.exports = { plugins: [ // ... require('postcss-plugin-px2rem')({ rootValue: 16, // 根元素字体大小 unitPrecision: 5, // 保留5位小数 propWhiteList: [], // 属性白名单 propBlackList: [], // 属性黑名单 exclude: /node_modules/, // 排除特定文件 selectorBlackList: [], // 选择器黑名单 ignoreIdentifier: false, // 是否忽略标示符 replace: true, // 是否替换属性值 mediaQuery: false, // 是否将媒体查询中的px为rem minPixelValue: 0 // 最小像素值 }), // ... ] } ``` 其中,rootValue表示我们设置的基准值,一般为16,表示1rem等于16px;unitPrecision表示保留的小数点位数;propWhiteList表示需要换成rem的属性白名单;propBlackList表示需要忽略换的属性黑名单;exclude表示需要排除的文件路径;selectorBlackList表示需要忽略换的选择器黑名单;ignoreIdentifier表示是否忽略标识符;replace表示是否替换属性值;mediaQuery表示是否将媒体查询中的px为rem;minPixelValue表示最小像素值。 使用Vitepxrem功能,可以轻松实现移动画面的适配,保证页面在不同设备上展示效果基本一致,大大提高开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值