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

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

友情声明

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

文章目录

b站移动端h5适配方式

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

当我们切换到平板模式:

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

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

本例rem适配方式

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

看下咱们的例子:

附赠录屏讲解

待更新。。。

相关推荐
知识分享小能手11 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
咔咔一顿操作20 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
汪叽家的兔子羡2 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
朝阳394 天前
vue3【组件封装】超级表单 S-form.vue
vue3·组件封装
清岚_lxn9 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
伍哥的传说14 天前
Vue3 Anime.js超级炫酷的网页动画库详解
开发语言·前端·javascript·vue.js·vue·ecmascript·vue3
科技D人生14 天前
Vue.js 学习总结(18)—— Vue 3.6.0-alpha1:性能“核弹“来袭,你的应用准备好“起飞“了吗?!
前端·vue.js·vue3·vue 3.6·vue3.6
伍哥的传说15 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook16 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程17 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯