使用tailwindcss轻松实现移动端rem适配

本示例节选自小卷全栈开发实战系列的《Vue3实战》。演示如何用tailwindcss所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。

友情声明

学习分享不易,如果小伙伴觉得有帮助,点赞支持下。满30赞,将随文附赠录屏讲解,感谢支持!

文章目录

b站移动端h5适配方式

以下是我们要模仿的导航栏功能

当我们切换到平板模式:

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

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

本例rem适配方式

基于tailwindcss实现的移动端h5适配,只要咱们在应用class时采用其默认rem的数值写法,也就是说尽量不采用定制的px写法。在这个基础上只需要修改页面html元素设置的font-size基准值就可以自动完成屏幕宽度的适配。

看下咱们的例子:

附赠录屏讲解

待更新。。。

相关推荐
叶浩成5204 小时前
Clerk 用户认证系统集成文档
javascript·vue3·clerk
叫我阿柒啊21 小时前
Java全栈开发面试实战:从基础到微服务的深度解析
java·jvm·微服务·vue3·springboot·全栈开发·restfulapi
叫我阿柒啊2 天前
从Java全栈到前端框架的深度探索
java·微服务·typescript·vue3·springboot·前端开发·全栈开发
叫我阿柒啊2 天前
Java全栈开发实战:从Spring Boot到Vue3的项目实践
java·spring boot·微服务·性能优化·vue3·全栈开发
叫我阿柒啊3 天前
Java全栈工程师面试实战:从基础到微服务的深度解析
java·redis·微服务·node.js·vue3·全栈开发·电商平台
叫我阿柒啊3 天前
从全栈开发到微服务架构:一次真实的Java面试实录
java·redis·ci/cd·微服务·vue3·springboot·jwt
Jinuss6 天前
Vue3源码reactivity响应式篇之Map、Set等代理处理详解
前端·vue.js·vue3
Jinuss7 天前
Vue3源码reactivity响应式篇Reflect和Proxy详解
前端·vue3
知识分享小能手9 天前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3