使用rem、动态vh自适应移动端

rem

rem 的值是根据根元素 html 字体大小的来计算的，即1rem = html font-szie
如果 html 元素没有指定字体大小，那么浏览器默认的字体大小是 16px ，所以 1rem = 16px 

使用：

把 html 设置 font-size: 1px ，这样我们不用换算 px ,就可直接使用 rem
比如设计稿上写的 24px，我们代码里面直接写 24rem 就可以了

不同屏幕自适应：

不同用户的设备屏幕宽度不同，若每个用户对应的 html 元素 font-size 值相同的话，用户看到的显示效果也是不同的。

可以用 JavaScript 来根据用户的屏幕宽度，动态更改 html 元素上的 font-size 值，从而使实际显示的内容比例始终保持不变，不同用户看到的效果也会保持一致。

比如，设计稿的宽度为 400px ，里面显示了一个宽度为 40px 的盒子。某用户以 800px 宽度的设备来访问，看到的盒子宽度应该为 80px。那么此时在 html 元素的 font-size 值设置为 2px ，然后盒子的宽度采用 rem 单位，设置为 40rem ，那么就能显示出 80px 的盒子了。保持用户看到的和设计稿中的效果比例一致。

所以，html元素的font-size计算公式为：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'

vh

vh 和 vw 都是相对于视窗的宽高度，“视窗”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。可以简单理解为屏幕百分比，1vh = 屏幕的1%

使用：

如果需要固定显示屏幕百分比的元素，可以使用 vh/vw

移动端 100vh 显示 bug：

vh 需要单独讲一讲，在移动端的Chrome 和 Safari上会显示溢出 
移动端浏览器对于 vh 单位的计算，是不包含地址栏的，也就是说 100vh 的高度会使带有地址栏的视图溢出。

解决方法：

使用 window.innerHeight 获取当前视窗的的高度，将高度按 100 份等分，得到视窗的单位高度, 然后通过 js 设置成一个 css 的变量 --vh

js：document.documentElement.style.setProperty('--vh', `${vh}px`)

css：
//表示100vh
height: calc(var(--vh, 1vh) * 100);

//100vh - 60rem
height: calc(var(--vh, 1vh) * 100 - 60rem);

代码:

function resetVhAndPx() {
        let vh = window.innerHeight * 0.01
        document.documentElement.style.setProperty('--vh', `${vh}px`)         document.documentElement.style.fontSize = document.documentElement.clientWidth / 375         + 'px'
}
onMounted(() => {
        resetVhAndPx() // 监听resize事件 视图大小发生变化就重新计算1vh的值         window.addEventListener('resize',resetVhAndPx)
})