jjz-postcss-pxto-plugin

将px转成vw、rem等单位的postcss插件

Install

  npm i -D jjz-postcss-pxto-plugin

Usage

px => vw

  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          require('jjz-postcss-pxto-plugin')({
            screenWidth: 750,
            toFixed: 2, // 转换后最少小数位
            excludes: [ 'PX' ], // 忽略的转换标识
            unit: 'vw' // 转换后的单位
          })
        ]
      }
    }
  }

before

@charset "utf-8";

.b {
  width: 50px;
  height: 40px;
  background-color: red;
}

@media screen and (-webkit-mini-device-ratio: 2) {
  .f {
    font-size: 12PX;
  }
}

.b:after {
  content: "";
  -webkit-tap-highlight-color: transparent;
  transform: translate(3px);
  border: 1PX solid red;
  box-shadow: inset 0 0 10px, inset 0 0 20px;
}

after

@charset "utf-8";

.b {
  width: 6.67vw;
  height: 5.33vw;
  background-color: red;
}

@media screen and (-webkit-mini-device-ratio: 2) {
  .f {
    font-size: 12px;
  }
}

.b:after {
  content: "";
  -webkit-tap-highlight-color: transparent;
  transform: translate(0.40vw);
  border: 1px solid red;
  box-shadow: inset 0 0 1.33vw, inset 0 0 2.67vw;
}

px => rem

  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          require('jjz-postcss-pxto-plugin')({
            remPixel: 100,
            toFixed: 2, // 转换后最少小数位
            excludes: [ 'PX' ], // 忽略的转换标识
            unit: 'rem' // 转换后的单位
          })
        ]
      }
    }
  }

before

@charset "utf-8";

.b {
  width: 50px;
  height: 40px;
  background-color: red;
}

@media screen and (-webkit-mini-device-ratio: 2) {
  .f {
    font-size: 12PX;
  }
}

.b:after {
  content: "";
  -webkit-tap-highlight-color: transparent;
  transform: translate(3px);
  border: 1PX solid red;
  box-shadow: inset 0 0 10px, inset 0 0 20px;
}

after

@charset "utf-8";

.b {
  width: 0.50rem;
  height: 0.40rem;
  background-color: red;
}

@media screen and (-webkit-mini-device-ratio: 2) {
  .f {
    font-size: 12px;
  }
}

.b:after {
  content: "";
  -webkit-tap-highlight-color: transparent;
  transform: translate(0.03rem);
  border: 1px solid red;
  box-shadow: inset 0 0 0.10rem, inset 0 0 0.20rem;
}

option

screenWidth

default 750

设计稿尺寸（unit为vw时需要）

toFixed

default 2

转换后保留的小数位

unit

default vw

转换成什么类型

remPixel

default 100

1rem等于多少px (unit为rem需要)

excludes

default [ 'PX' ]

有些px是不需要转换的，比如字体和1px 边框，使用此单位，值不会被转换成rem或vw，里面的元素值会被转成px