移动端布局REM

我们在开发移动端的过程中，针对不同设备需要做响应式布局，这里最常用的布局单位便是REM。
一般情况设计给到的设计稿宽度为750px，此时我们需要进行PX与REM的转换，转换方法分为两种，一种是手动转换，另一种直接使用插件转换

手动转换

1. 参照比例（设计稿比例）
   根据设计稿750px这个比例，给予html.fontSize一个初始值

html {
	font-size: 100px;
  	// 750PX的设计稿中，1REM=100PX
  	// 未来我们需要把从设计稿中测量出来的尺寸（PX单位）转换为REM单位去设置样式
}

设置fontSize为100方便计算，例如：测量出宽度为328px，转化为rem只需要328/100，直接得出3.26rem

2. 设备与设计稿的比例
   我们需要根据当前设备宽度，计算相对于设计稿750的缩放比例，从而让REM的转换比例也跟着缩放，REM和PX的换算比例一改

/* 计算当前设备下，REM和PX的换算比例 */
(function () {
	const computed = () => {
		let html = document.documentElement,
             deviceW = html.clientWidth,
             designW = 750;
             // 3. 超过750宽度，不再让rem变大
             if (deviceW >= designW) {
                    html.style.fontSize = '100px';
                    return;
             }
             // 750 / 100 = deviceW / ?
             let ratio = deviceW * 100 / designW;
             html.style.fontSize = ratio + 'px';
	};
	computed();
	window.addEventListener('resize', computed);
})();

此时如果设备的宽度是375px，经过JS代码计算，设备html的fontSize则为50px

3. 屏幕超设计图宽度优化
   如果设备超过750宽度，则不让REM继续变大，保持内容居中，两边留空

// 3. 超过750宽度，不再让rem变大
if (deviceW >= designW) {
        html.style.fontSize = '100px';
        return;
 }

插件转换

需要的插件：
lib-flexible postcss-pxtorem

1. 引入插件并做配置
   lib-flexible

• 根据设备宽度自动计算
• html.style.fontSize = 设备宽度 / 10 + ‘px’
• 750设计稿 1REM = 75px
• 375设备上 1REM = 37.5px

postcss-pxtorem

• 可以将我们写的PX，按照当时比例，自动转换为REM，不需要我们自己计算
• 在webpack / vite中做配置

{
	rootValue: 75,
	propList: ['*']
}

2. 入口引入文件

3. 手动设置：设备超750px宽度不再放大