postcss-pxtorem

什么是 postcss-pxtorem ?

postcss-pxtorem 是一个可以将像素单位(px)自动抓换为 rem 单位的插件

怎么使用 postcss-pxtorem ?

1、安装 postcss-pxtorem

[$]

 npm install postcss-pxtorem --save-dev 

2、如果是vue-cli 3,那么在项目的根目录下创建一个 vue.config.js文件,然后复制以下代码

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 75, // 换算的基数(75 =  设计稿750像素 / 10等份)
            // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

3、编写测试代码,看是否能自动将 px值 转换为 rem值

<template>
  <div class="home">
    <div class=test>
      测试
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  }
}
</script>
<style scoped>

  .test {
    width: 200px;
    height: 200px;
    background: red;
    color: white;
  }

</style>

4、效果图:

注:一般情况是 flexible-js + postcss-pxtorem 来完成移动端适配

Demo 参见: https://gitee.com/guobao0730/flexible-demo

postcss-pxtorem 中参数解释:

默认参数如下:

 {
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
} 

rootValue (Number | Function) 表示html中的字体大小(font-size)的默认值。如果是以750像素作为设计稿,把屏幕的宽度划分为10等份,那么html中的字体大小(font-size)为 750px / 10 = 75

unitPrecision(Number)允许REM单位增加的十进制数字。

propList(Array)可以从px更改为rem的属性。 通配符(*)表示所有属性;[‘font-size’]表示匹配所有font-size属性;在单词的开头或结尾使用,例如([‘position*’]将匹配background-position-y);使用 ! 表示不匹配的属性,例如: [‘!letter-spacing’] 表示不匹配 letter-spacing 属性;* 和 ! 组合使用,例如: [‘!font*’] 表示不匹配以font开头的所有属性;

selectorBlackList (Array)表示要忽略的选择器,保留为px值,不进行转换。如果值是字符串,它将检查选择器是否包含字符串。例如:[‘body’]将匹配 .box-class 类选择器。如果值是正则表达式(regexp),它将检查选择器是否匹配正则表达式(regexp)。例如:[/^body$/]将匹配body,但不匹配 .body

replace (Boolean) 表示是否替换包含REM的规则,而不是添加回退。

mediaQuery (Boolean) 表示是否允许在媒体查询中转换 px

minPixelValue (数字) 表示设置要替换的最小像素值,例如 12 即表示px值小于12的将不会被转换

exclude (字符串、正则表达式、函数)表示要忽略并保留为 px 的文件路径。如果值是字符串,它将检查文件路径是否包含字符串,例如:’exclude’ 将匹配 \project\postcss-pxtorem\exclude\path 。如果值为 正则表达式(regexp),它将检查文件路径是否与 正则表达式(regexp)匹配。例如:/exclude/i 将匹配 \project\postcss-pxtorem\exclude\path .。如果值是函数(function),则可以使用 exclude function返回true,该文件将被忽略。回调函数会将文件路径作为参数传递,它应该返回一个布尔结果。 function (file) { return file.indexOf(‘exclude’) !== -1; }

忽略单个:

如果想忽略单个,那么最简单的方法,就是将传统的 px 改为 PX或者 Px 即可。如下案例:

/*
通过 px 定义的,会将其转换为 rem 值
*/
.convert {
    font-size: 16px;
}

/*
PX 或 Px 定义的,将不会转换为 rem 值,还是像素值
*/
.ignore {
    width: 100PX;
    border: 1Px solid;
}

[/$]

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注