背景
有个项目原来是设计给小程序横屏webview体验的，到目前只考虑按812*375的设计宽高，用px单位去写css，在一般手机尺寸上显示正常；
最近有个需求需要在电脑/大屏上使用，当设定分辨率为3840x2160（设计师给的）时，或者直接用桌面浏览器打开时，上面的UI变成了下面的样子
问题
用px单位的弊端就出现了，px是抽象单位，大小一般跟设备像素比(dpr)有关，例如：dpr为2时1px表示两个物理像素点长度，dpr为3时1px表示3个物理像素点长度，所以元素用px做单位的话，只要dpr没变，元素在屏幕上的尺寸就是固定的，屏幕拉伸元素尺寸不变，如下，观察'丹华公馆'logo图片：
解决方法
经过搜索，决定把px单位切换到rem单位（rem请自行搜索），简单来说，rem是相对单位，1rem大小等于html元素上的font-size大小，比如html上font-size: 16px;那1rem=16px；
那可以把html的font-size大小和屏幕尺寸关联起来，屏幕放大，html.font-size跟着变大，屏幕缩小，html.font-size跟着变小，那用rem做单位的元素也会跟着屏幕缩放而缩放了；
因为项目里几乎所有css单位都是px，要怎么设置html的font-size才能让改动最小且简单呢？
我的方案
在812*375分辨率下，如果让1rem=1px，那代码里只需全局把'px' 改为 'rem'即可，这时html.font-szie 是 1px，或者说 812/812 px，即windowWidth / 812 px，那html.font-szie定为 windowWidth / 812 px，js增加如下代码即可：
js
// 设置rem
const handleResize = () => {
const hw = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = hw / 812 + "px"; // 在 812x375 设计尺寸下，1rem=1px
};
handleResize();
window.onresize = handleResize;其他
- 把用到的UI库的组件单位也改成rem单位
- 更改一些元素的相对定位
表现如下，搞定🎉：
该项目以后的需求开发时，css可以按以前的规则取数值，单位把px改为rem即可！
最后
使用rem单位的话，关键是html.font-szie值怎么设，按1rem=1px的话，没有多余的换算，无论新旧项目，都可以按这个规则应用。