postcss-rpx2vmin

将rpx单位转换为vmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin 为了适配PC端的样式，在这里我们只用到了vmin。 小程序PC端展示样式就相当于将竖屏改为横屏 当我们在竖屏时候，100vmin的取值为手机屏幕宽度，当横屏时候，100vmin的取值仍然为手机屏幕宽度，所以以vmin为单位的元素，在手机屏幕发生旋转的时候，其显示大小并不会发生改变（毕竟不管横屏竖屏，100vmin都等于屏幕的宽度）。 在使用rpx进行布局时，750rpx的取值为手机屏幕的宽度，而在使用vmin时，100vmin的取值为手机屏幕的宽度，所以，rpx和vmin之间存在一个换算关系，即：x rpx=( x * 100 / 750)vmin。举个例子，75rpx转化为vmin为75 * 100 / 750 = 10 vmin。所以，我们只要将rpx转化成vmin就可以愉快的码页面了~

// test.js
const css = `
  .container {
    width: 750rpx;
    height: 400rpx;
    font-size: 32rpx;
  }
`;

postcss([rpxToVminPlugin()])
  .process(css)
  .then(result => {
    console.log(result.css);
  });

使用

在postcss.config.js里使用

module.exports = {
  plugins: [
    require('postcss')(),
    require('postcss-rpx2vmin')(), // 引用插件并调用
  ],
};