使用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

remem 的区别

em 是以父元素的字体大小来计算; rem 顾名思义,就是 rootem, 所以它是以 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计算公式为:

js 复制代码
// 用户设备宽度 / 设计稿标准宽度 
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'

vh

vhvw 都是相对于视窗的宽高度,"视窗"所指为浏览器内部的可视区域大小 ,即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

js 复制代码
document.documentElement.style.setProperty('--vh', `${vh}px`)

css中使用

css 复制代码
//表示100vh
height: calc(var(--vh, 1vh) * 100);

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

代码

js 复制代码
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)
})

总结

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