首页 前端知识 vue2项目postcss.config.js配置,将px转化成rem

vue2项目postcss.config.js配置,将px转化成rem

2024-06-11 09:06:25 前端知识 前端哥 63 807 我要收藏

依赖包:postcss-pxtorem

配置:如下有三种不同方案进行配置(最好搭配最后面的rem.js文件进行使用)

方案一、在项目根目录下创建 postcss.config.js

配置如下:

module.exports = () => ({
  plugins: [
    require("autoprefixer")(),
    // require("postcss-px2rem")({ remUnit: 75 })
    require("postcss-pxtorem")({
      rootValue: 65,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"]
    })
  ]
})
  • rootValue (Number)根元素字体大小。
  • unitPrecision (数字)允许REM单位增长的十进制数。
  • propList (数组)可以从px更改为rem的属性。
    • 值必须完全匹配。
    • 使用通配符*启用所有属性。例:[‘*‘]
    • *在单词的开头或结尾使用。([‘*position*‘]会匹配background-position-y
    • 用于!与属性不匹配。例:[‘*‘, ‘!letter-spacing‘]
    • 将“not”前缀与其他前缀组合在一起。例:[‘*‘, ‘!font*‘]
  • selectorBlackList (数组)要忽略的选择器并保留为px。
    • 如果value是string,则检查selector是否包含字符串。
      • [‘body‘] 会匹配 .body-class
    • 如果value是regexp,它会检查选择器是否与正则表达式匹配。
      • [/^body$/]会匹配body但不会.body
  • replace (布尔值)替换包含rems的规则,而不是添加回退。
  • mediaQuery (布尔值)允许在媒体查询中转换px。
  • minPixelValue (数字)设置要替换的最小像素值。

方案二、 在vue.config.js单独配置

module.exports = {
  //编译打包存放的目录默认dist
  outputDir: 'dist',

  // 如果你不需要使用eslint,把lintOnSave设为false即可
  lintOnSave: false,

  // 设为false打包时不生成.map文件
  productionSourceMap: false,

  assetsDir: 'static',
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          // 补全css前缀(解决兼容性)
          require("autoprefixer")(),
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 32, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van", ".my-van"],// 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
          })
        ]
      }
    }
  },

  devServer: {
    port: 8080,
    // proxy: {/**处理跨域,本地代理转发*/
    //     '/internal': {
    //         target: 'http://192.168.2.75:9501/',  // 接口域名
    //         secure: false,  // 如果是https接口,需要配置这个参数
    //         changeOrigin: true,  //是否跨域}
    //     },
    // },
  }
}

方案三、 在package.json单独配置

{
  "name": "projectName",
  "version": "0.1.0",
    "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "selectorBlackList": [".van",".my-van"],
        "propList": ["*"],
        "minPixelValue": 2
      }
    }
  },
"browserslist": [  "> 1%",  "last 2 versions",  "not ie <= 8",  "ios >= 8",  "android >= 4.0"]
}

需要在main.js文件中引入下面的rem.js文件

import '.utils/rem.js'

rem.js文件

// 宽度示例使用的是平板ipad宽度,可根据不同场景自己定义
(function (win) {
    "use strict";

    win.resize = {};

    var timer = null;
    var rem = 12;
    var doc = win.document;
    var docEl = doc.documentElement;

    /**
     * 刷新页面REM值
     */
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        // width = width > 768 ? 640 : width;
        width = width > 768 ? 768 : width;
        rem = width / 7.68;
        docEl.style.fontSize = rem + 'px';
    }

    /**
     * 页面缩放或重载时刷新REM
     */
    win.addEventListener('resize', function () {
        clearTimeout(timer);
        timer = setTimeout(refreshRem, 100);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(refreshRem, 100);
        }
    }, false);

    // 解决font-size过大导致间距不正常,必须指定body字号为12px
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = '12px';
    } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
            doc.body.style.fontSize = '12px';
        }, false);
    }

    refreshRem();

    /**
     * rem to px
     * @param d
     * @returns {number}
     */
    resize.rem2px = function (d) {
        console.log('rem2px------', d)
        var val = parseFloat(d) * rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    };

    /**
     * px to rem
     * @param d
     * @returns {number}
     */
    resize.px2rem = function (d) {
        console.log('px2rem------', d)
        var val = parseFloat(d) / rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    };

})(window);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11895.html
标签
postcss
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!