【Plugin】postcss-px2rem 插件进行内容自适应

最新推荐文章于 2025-07-09 14:02:36 发布

空空__

最新推荐文章于 2025-07-09 14:02:36 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Plugin 文章标签： postcss-px2rem px2rem

本文链接：https://blog.youkuaiyun.com/qq_24991841/article/details/88887053

1.安装

npm i postcss-px2rem -D

2.vue.config.js 文件中

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
  remUnit: 192 //基准大小 baseSize，需要和rem.js中相同 
});
module.exports = {
// 其他内容
 css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
};

3.在src下创建rem.js文件夹

export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
    
    // 这个if语句代码，是用来控制屏幕的最小宽度，不需要可以可以不写
    if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= 130) {
      document.documentElement.style.fontSize = '130px';
    }
  
  }