本示例节选自小卷全栈开发实战系列的《Vue3实战》。演示如何用tailwindcss
所支持的rem
体系轻松实现一个仿b站移动端头部导航栏rem
适配。
友情声明
学习分享不易,如果小伙伴觉得有帮助,点赞支持下。满30赞,将随文附赠录屏讲解,感谢支持!

b站移动端h5适配方式
以下是我们要模仿的导航栏功能

当我们切换到平板模式:

很显然,从html
页面源代码,我们可以看到,它采用的是vh
的适配方式

而这里咱们采用的rem
,因为它可以更好的控制在移动端高分辨率的情况下,在字体做到适配的同时,我们还可以控制尽量显示更多的内容,而不是等比例的缩放。