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

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

友情声明

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

文章目录

b站移动端h5适配方式

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

当我们切换到平板模式:

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

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

本例rem适配方式

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

看下咱们的例子:

附赠录屏讲解

待更新。。。

相关推荐
技术闲聊DD2 天前
Vue3学习(4)- computed的使用
vue3·computed
蓝胖子的多啦A梦3 天前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
有梦想的攻城狮5 天前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2
全栈小57 天前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
西哥写代码10 天前
基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图
3d·vue3·vr·cornerstonejs
西哥写代码11 天前
基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具
javascript·3d·vue3·vr·cornerstonejs
放逐者-保持本心,方可放逐11 天前
浅谈 JavaScript 性能优化
开发语言·javascript·性能优化·vue3·v-memo·vue3性能优化·v-once
西哥写代码13 天前
基于cornerstone3D的dicom影像浏览器 第二十四章 显示方位、坐标系、vr轮廓线
javascript·3d·vue3·vr·dicom·cornerstonejs
西哥写代码14 天前
基于cornerstone3D的dicom影像浏览器 第二十三章 mpr预设窗值与vr preset
javascript·3d·vue3·dicom·cornerstonejs
linweidong15 天前
汇量科技前端面试题及参考答案
webpack·vue3·react·前端面试·hooks·懒加载·flex布局