使用postcss-rpx2vmin

为了更好的适配PC端小程序的横屏模式，此外为了避免改造成本过高。我们可以将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);  
});

输出结果

.container {
    width: calc(100vmin);
    height: calc(53.333333333333336vmin);
    font-size: calc(4.266666666666667vmin);
  }

在项目中使用

// npm
npm install postcss-rpx2vmin
// yarn
yarn add postcss-rpx2vmin

在postcss.config.js里使用

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

上述方案只是一种临时解决方案，部分页面布局还需要单独细化调整

如果是一个新项目可以参考官网的page-meta

developers.weixin.qq.com/miniprogram…

从开始做的时候就考虑适配问题