VUE2使用postcss-pxtorem

最新推荐文章于 2025-04-11 10:12:04 发布

忒子

最新推荐文章于 2025-04-11 10:12:04 发布

阅读量2.5k

点赞数 1

分类专栏： vue.js vue2 插件文章标签： postcss 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_53363875/article/details/128566163

版权

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

2 篇文章

订阅专栏

1 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

该文介绍了如何在Vue项目中安装并配置Postcss-pxtorem插件进行px转rem的转换工作，以实现响应式布局。首先，通过yarn添加固定版本的依赖。然后，在vue.config.js中插入转换规则。接着，创建resetSize.js文件，定义resizeScale函数来动态调整html字体大小，以适应不同屏幕比例。最后，在main.js中引入这个函数，并监听页面展示和窗口resize事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（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