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

相关推荐
盏茶作酒2913 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_33 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 小时前
vue实现微信聊天emoji表情
前端·javascript
停止重构1 小时前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚1 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin1 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang4531 小时前
React项目(移动app)
前端