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

前言

这是我的 模仿抖音 系列文章的第六篇

第一篇：200行代码实现类似Swiper.js的轮播组件

第二篇：实现抖音 "视频无限滑动"效果

第三篇：Vue 路由使用介绍以及添加转场动画

第四篇：Vue 有条件路由缓存，就像传统新闻网站一样

第五篇：Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像

---

网上还有很多种方法做适配的，各种方案有利有弊，此文章仅提供一个思路，并不适合每个人

rem

rem 的值是根据根元素 html 字体大小的来计算的，即1rem = html font-szie，

如果 html 元素没有指定字体大小，那么浏览器默认的字体大小是 16px ，所以 1rem = 16px

如果 html 元素指定 font-size: 1px ，那么 1rem = 1px

同理 html 元素指定 font-size: 3px ，那么 1rem = 3px

同理 html 元素指定 font-size: 1000000px ，那么 1rem = 1000000px

同理 html 元素指定 font-size: 0.000001px ，那么 1rem = 0.000001px

rem 和 em 的区别

em 是以父元素的字体大小来计算; rem 顾名思义,就是 root 的 em， 所以它是以 html 的字体大小来计算

例子

html 设置 font-size: 1px

父元素 Parent 设置 font-size: 2px

---

子元素 Child 设置 font-size: 16rem

则渲染到界面上的实际大小为 font-size: 16px ，因为他是以 html 来计算，1rem = 1px , 16rem = 16px

子元素 Child 设置 font-size: 16em

则渲染到界面上的实际大小为 font-size: 32px ，以父级来计算，父级是 2px , 所以 1em = 2px , 16em = 32px

使用

把 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 的高度会使带有地址栏的视图溢出。

核心问题是移动浏览器（Chrome 和 Safari）有一个"有用"的功能，地址栏有时可见，有时隐藏，从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分，而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是，当地址栏可见时，屏幕的底部将被切断，从而违背了100vh最初的目的。

解决方法

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

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)
})

总结

通过使用 rem 和 vh/vw 我们就可以适配大多数常见设备啦，如果有特殊需求还可以使用 媒体查询 来单独适配~