0.0.1 • Published 12 months ago
postcss-rpx2vmin v0.0.1
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')(), // 引用插件并调用
],
};
0.0.1
12 months ago