postcss-plugin-px2rem和postcss-px2rem-exclude使用方法

最新推荐文章于 2025-05-26 12:30:00 发布

在bat捡垃圾

最新推荐文章于 2025-05-26 12:30:00 发布

阅读量1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：学习知识点 get

本文链接：https://blog.youkuaiyun.com/qq_33144001/article/details/101029955

学习同时被 3 个专栏收录

47 篇文章

订阅专栏

知识点

45 篇文章

订阅专栏

get

44 篇文章

订阅专栏

本文详细介绍如何使用postcss插件进行px到rem单位的转换，实现响应式布局。通过配置postcss-px2rem-exclude和postcss-plugin-px2rem，可以精确控制哪些属性和文件被转换，避免UI插件和特定属性受到影响。同时，介绍了如何结合rem.js和lib-flexible进行屏幕适配。

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

npm i postcss-px2rem-exclude  -D
链接：https://www.npmjs.com/package/postcss-px2rem-exclude


.postcssrc.js
module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      propList: ['*','!border'],
//这里的大小等于rem.js里面的scale最好是75 10 或者37.5 20 （可能是因为插件的标准就是75）
//remUnit的值很小的话比列严重失调 至于原因还不知道 
      exclude: /node_modules|folder_name/i   //过滤插件
    }
  }
}

rem.js
const baseSize = 10
// 设置 rem 函数
function setRem () {

const scale = document.documentElement.clientWidth / baseSize  ;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = scale + 'px'
  }
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
       setRem()
}

main.js 引入rem.js
import "./rem.js" 
   //可以用npm i lib-flexible -S 
  //import "./lib-flexible" 代替

// postcss-plugin-px2rem
//https://www.npmjs.com/package/postcss-plugin-px2rem
// npm i  postcss-plugin-px2rem --D

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-plugin-px2rem": {
//        rootValue: 32,//rootValue是html的font-size的2倍(猜测是和dpr有关)
    rootValue: 75,//配合lib-flexible使用 750的设计稿
    unitPrecision: 5,
      mediaQuery: true,
      // exclude:"/node_modules/i",//错误写法  不能是字符串
      exclude: /(node_module)/i,
      selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下   排除指定的文件的影响
      propBlackList: ['border'] //过滤属性
    }
  }
}

//npm i lib-flexible -S 
main.js
import "./lib-flexible" 代替

推荐使用postcss-plugin-px2rem 因为支持更多属性(过滤单个属性、文件夹、排除ui插件)