postcss-pxtorem

最新推荐文章于 2025-07-10 16:43:18 发布

原创最新推荐文章于 2025-07-10 16:43:18 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #前端 #javascript

postcss-pxtorem屏幕自适应

//安装插件
npm install postcss postcss-pxtorem --save-dev

//在根目录中新增postcss.config.cjs或postcss.config.js文件，并写上如下代码
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 16,
      selectorBlackList: [],
      propList: ["*"]
    }
  }
};

//在工具文件夹新增文件tranfrom.ts设置缩放比例
 const baseSize = 16;
function tranfrom() {
  const scale = document.documentElement.clientWidth / 1920;
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
}

tranfrom();
window.onresize = function () {
  tranfrom();
};

//在main.ts文件中引入
import "@/utils/tranfrom";

设置完成后重启就可以了

https://www.cnblogs.com/dingxingxing/p/17664126.html
https://blog.csdn.net/weixin_44265146/article/details/131741369
https://blog.csdn.net/Bdbdbdnnd/article/details/132531925