@reaf-toolkit/postcss-px-to-viewport

将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

简介

如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你 CSS 中的 px 单位转化为 vw，1vw 等于 1/100 视口宽度。

输入

.class {
  margin: -10px 0.5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.class2 {
  padding-top: 10px; /* px-to-viewport-ignore */
  /* px-to-viewport-ignore-next */
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

输出

.class {
  margin: -3.125vw 0.5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

.class2 {
  padding-top: 10px;
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

上手

安装

使用 npm 安装

$ npm install @reaf-toolkit/postcss-px-to-viewport --save-dev

或者使用 yarn 进行安装

$ yarn add -D @reaf-toolkit/postcss-px-to-viewport

配置参数

默认参数:

{
  unitToConvert: "px",
  viewportWidth: 320,
  viewportHeight: 568,
  unitPrecision: 5,
  viewportUnit: "vw",
  fontViewportUnit: "vw",
  selectorBlackList: [],
  propList: ["*"],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  landscape: false,
  landscapeUnit: "vw",
  landscapeWidth: 568,
}

interface IOptions {
  /** 转换单位 */
  unitToConvert?: string;
  /** viewport宽，可根据文件自定义 */
  viewportWidth?: ((file: string) => number) | number;
  /** viewport高 */
  viewportHeight?: number;
  /** 小数点 */
  unitPrecision?: number;
  /** viewport单位 */
  viewportUnit?: string;
  /** 字体单位 */
  fontViewportUnit?: string;
  /** 黑名单 */
  selectorBlackList?: string[];
  /** 属性列表 */
  propList?: string[];
  /** 最小转换单位 */
  minPixelValue?: number;
  /** 是否开启媒体查询 */
  mediaQuery?: boolean;
  /** 是否直接更换属性值，而不添加备用属性 */
  replace?: boolean;
  /** 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) */
  landscape?: boolean;
  /** 横屏时使用的单位 */
  landscapeUnit?: string;
  /** 横屏时使用的视口宽度 */
  landscapeWidth?: number;
  /** 根据文件自定义单位替换 */
  createPxReplace?: (
    file: string,
    pixels: number,
    toFixed?: (number: number, precision: number) => number,
    unitPrecision?: number
  ) => string;
  /** 排除文件 */
  exclude?: RegExp | RegExp[];
  /** 包含文件 */
  include?: RegExp | RegExp[];
}

Ignoring

You can use special comments for ignore conversion of single lines:

• /* px-to-viewport-ignore-next */ — on a separate line, prevents conversion on the next line.
• /* px-to-viewport-ignore */ — after the property on the right, prevents conversion on the same line.

Example:

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
  border: solid 2px #000; /* px-to-viewport-ignore */
}

/* example output: */
.class {
  width: 10px;
  padding: 3.125vw;
  height: 10px;
  border: solid 2px #000;
}

There are several more reasons why your pixels may not convert, the following options may affect this: propList, selectorBlackList, minPixelValue, mediaQuery, exclude, include.

使用 PostCss 配置文件时

在postcss.config.js添加如下配置

module.exports = {
  plugins: {
    // ...
    "@reaf-toolkit/postcss-px-to-viewport": {
      // options
    },
  },
};

借鉴自

• https://github.com/evrone/postcss-px-to-viewport