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

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

友情声明

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

在这里插入图片描述

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

当我们切换到平板模式：

在这里插入图片描述

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

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

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

看下咱们的例子：

在这里插入图片描述

待更新。。。

相关阅读:
WebPack5基础使用总结(一)
flask获取post请求参数
SpringBoot中CommandLineRunner的使用
『手撕Vue-CLI』函数柯里化优化代码
饥荒联机版 Don‘t Starve Together服务器架设
面了12家软件公司测试岗位，高频面试题大盘点，刷完谁都留不住我跳槽的心
中国传统节日春节网页HTML代码春节大学生网页设计制作成品下载学生网页课程设计期末作业下载 DW春节节日网页作业代码下载
redis手动搭建cluster(集群)
在Linux上部署Servlet程序
Qt 中 setModel 设置数据类型和 setView 函数设置视图

原文地址：https://blog.csdn.net/felix_alone2012/article/details/141096185