使用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
宽度的设备来访问,看到的盒子宽度应该为 80
px。那么此时在 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
我们就可以适配大多数常见设备啦,如果有特殊需求还可以使用 媒体查询
来单独适配~