前端自适应布局px、rpx、vw 使用及转换

各个单位之间的互相转化

// rpx 转化为 vw （默认100vw === 750rpx）
export const px2ToVw = (rpx) => `${(rpx / 7.5) * 1}vw`;

// rpx 转化为 px
export const rpxToPx = (rpx) => {
  return (window.innerWidth * rpx) / 750;
};

// px 转化为 rpx
export const pxToRpx = (px) => {
  return (px * 750) / window.innerWidth;
};

// px 转化为 vw
export const pxToVw = (px) => {
  return px2ToVw(pxToRpx(px));
};

在 sass 中如何使用转化函数

// rpx 转化为 vw （默认100vw === 750rpx）
// 利用 sass 的函数声明 @function
@function px2vw($n) {
  @return ($n / 7.5) * 1vw;
}

.container {
	padding: px2vw(24)
}

打包时对单位进行处理转化

利用插件 postcss-px-to-viewport 或者 postcss-plugin-rpx2vw 实现打包处理（详细配置可自行搜索插件配置）

"plugins": {
	"postcss-px-to-viewport": {
		"viewportWidth": 375, // 设计稿的视口宽度
		"viewportUnit": "vw"  // 希望使用的视口单位
	},
	"postcss-plugin-rpx2vw": {
		"viewportWidth": 750, // 设计稿的视口宽度
		"viewportUnit": "vw"  // 希望使用的视口单位
	}
}