VUE2使用postcss-pxtorem

最新推荐文章于 2024-04-07 00:58:52 发布

忒子

最新推荐文章于 2024-04-07 00:58:52 发布

阅读量1.9k

点赞数 1

分类专栏： vue.js vue2 插件文章标签： postcss 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_53363875/article/details/128566163

版权

vue.js 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

插件

1 篇文章 0 订阅

订阅专栏

（1）安装固定版本依赖

yarn add postcss-pxtorem@5.1.1

（2）vue.config.js内部插入转换规则

①主要代码

      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: ['no-conversion-'],
            replace: false,
            mediaQuery: false,
            minPixelValue: 3,
            exclude: /node_modules/i

          }),
        ]
      }

（3）新建resetSize.js文件

export function resizeScale() {
  const docEle = document.documentElement;
  const screenRatioByDesign = 16 / 9;
  function setHtmlFontSize() {
    const screenRatio = docEle.clientWidth / docEle.clientHeight;
    let fontSize =
      ((screenRatio > screenRatioByDesign ? screenRatioByDesign / screenRatio : 1) *
        docEle.clientWidth) /
      10;
    // 增加192与16的对应关系
    fontSize = (fontSize / 192) * 16;
    docEle.style.fontSize = `${fontSize.toFixed(3)}px`;
  }

  setHtmlFontSize();

  window.addEventListener(
    'pageshow',
    function (e) {
      if (e.persisted) {
        // 浏览器后退的时候重新计算
        setHtmlFontSize();
      }
    },
    false
  );
  window.addEventListener('resize', setHtmlFontSize, { passive: true });
}

(4)在main.js文件中引入关键方法resizeScale