使用tailwindcss轻松实现移动端rem适配
本示例节选自小卷全栈开发实战系列的《Vue3实战》。演示如何用tailwindcss所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
友情声明
学习分享不易，如果小伙伴觉得有帮助，点赞支持下。满30赞，将随文附赠录屏讲解，感谢支持！
文章目录
- b站移动端h5适配方式
- 本例rem适配方式
- 附赠录屏讲解
b站移动端h5适配方式
以下是我们要模仿的导航栏功能
当我们切换到平板模式：
很显然，从html页面源代码，我们可以看到，它采用的是vh的适配方式
而这里咱们采用的rem，因为它可以更好的控制在移动端高分辨率的情况下，在字体做到适配的同时，我们还可以控制尽量显示更多的内容，而不是等比例的缩放。
本例rem适配方式
基于tailwindcss实现的移动端h5适配，只要咱们在应用class时采用其默认rem的数值写法，也就是说尽量不采用定制的px写法。在这个基础上只需要修改页面html元素设置的font-size基准值就可以自动完成屏幕宽度的适配。
看下咱们的例子：
附赠录屏讲解
待更新。。。
相关文章：
使用tailwindcss轻松实现移动端rem适配
本示例节选自小卷全栈开发实战系列的《Vue3实战》。演示如何用tailwindcss所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。 友情声明 学习分享不易，如果小伙伴觉得有帮助，点赞支持下。满30赞，将随文附赠录屏讲解，感谢…...
2021-11-08 51单片机2位秒表启动清零
缘由c51单片机，程序，仿真图，求帮助-编程语言-CSDN问答 #include "REG52.h"sbit K1 P1^0; sbit K2 P1^1; sbit K3 P1^2; sbit K4 P1^3; sbit P1_0P2^0; sbit P1_1P2^1; sbit P1_2P2^2; sbit P1_3P2^3; sbit P1_4P2^4; sbit P1_…...
谈基于大语言模型的图数据库路径检索
随着微软已经开源了GraphRAG项目的代码，基于图数据库的RAG 热度迅速升温。关注基于大语言模型与图模型数据库相结合的技术的人多了起来。 本文提出了一种类似人工搜索的“顺藤摸瓜”方法，实现图数据库的智能搜索方法。 本地私有数据存储和查询 本地私有…...
XHTML 简介
XHTML 简介 XHTML，即“可扩展超文本标记语言”（eXtensible HyperText Markup Language），是一种基于XML的标记语言，旨在取代HTML作为网页内容的标准格式。XHTML继承了HTML的基本结构，但更加严格和规范&…...
驱动开发系列10 - Linux Graphics 图形栈介绍
目录 一：Linux 图形栈总体结构 1. 整体图形栈: 2. 现代3D图形栈： 二：Xorg 介绍 Xorg 概述： Xorg的发展历史： Xorg绘制原理： Xorg的缺点： 三：Wayland 介绍 一：Linux 图形栈总体结构 1. 整体图形栈: 应用程序->桌面环境->GUI框架->Display Client->Displ…...
Docker快速入门指南
🛠️ Docker 应用场景 Docker 是一个开源的平台，旨在简化应用程序的开发、部署和管理。它通过容器技术，将应用及其所有依赖打包在一个标准化的环境中，从而确保应用在不同环境中的一致性和可移植性。在 Python 爬虫的场景中&#…...
VS Code中使用MSVC编译C++程序
前置条件 1. VS Code配置C开发环境 2. CMake安装 3. VS安装（MSVC编译器） 4. 环境变量配置（重要！！！） 使用msvc的cl工具编译程序，以及 “fatal error C1034: iostream: 不包括…...
四数之和（LeetCode）
题目 给你一个由 n 个整数组成的数组 nums ，和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] （若两个四元组元素一一对应，则认为两个四元组重复）： 0 <…...
学习使用备份软件BorgBackup
Time Machine是官方提供的强大备份系统，它能够备份macOS系统的一切，包括文件、照片、网页纪录、帐号密码以及安装过的软件等。如果系统出了问题，使用”时光回溯“，系统就能回到任意记录点，用过的多说好！ B…...
Java 实现合并两个有序链表：递归与迭代
Java 实现合并两个有序链表：递归与迭代 在面试和算法题中，合并两个有序链表是一个经典问题。通过这个问题，不仅可以考察候选人的基础数据结构掌握情况，还能测试他们对递归和迭代等编程技巧的应用能力。 本文将讨论如何使用 Java…...
【每日刷题】Day98
【每日刷题】Day98 🥕个人主页：开敲🍉 🔥所属专栏：每日刷题🍍 🌼文章目录🌼 1. 大数加法_牛客题霸_牛客网 (nowcoder.com) 2. 大数乘法_牛客题霸_牛客网 (nowcoder.com) 3. 扑克牌…...
51单片机-LED实验二
使用51单片机进行LED灯的实验，使用8个LED灯展示二进制数，使用独立按键控制二进制数的加法，每次按下独立按键K2，就让二进制数加一，定义了一个LedNum,表示二进制数，二进制数取反之后可以得到输出到LED端口的8…...
批发行业进销存-webview 读取NFC，会员卡 源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构
一、混合应用开发 混合应用顾名思义就是网页html和原生APP共同作用的结果 好处在一既有web的跨平台优势（安卓、苹果，电脑、国产电脑、平板电脑，自助机都能用） 好处二可以离线使用，比较稳定 好处三可以与本地硬件交…...
博弈dp，CF 731E - Funny Game
一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 731E - Funny Game 二、解题报告 1、思路分析 游戏规则其实就是交替取前缀和 考虑 f(i) 为 某人先手取前 i 个，最终能得到的最大分差 由于每人都是最佳发挥，所以有如下状态转移&am…...
基础知识：深入理解MongoDB、MySQL与Redis的应用与实践
基础知识：深入理解MongoDB、MySQL与Redis的应用与实践 在现代应用开发中，数据库系统的选择对于系统的性能、扩展性和维护性有着至关重要的影响。MongoDB、MySQL 和 Redis 是三种流行的数据库技术，它们各自有着独特的特点和适用场景。本文将详…...
Reids中List类型、Set类型、SortedSet类型的常用指令
List类型： Redis中的List类型与Java中的LinkedList类似，可以看做是一个双向链表结构。既可以支持正向检索和也可以支持反向检索。 特征也与LinkedList类似： 有序元素可以重复插入和删除快查询速度一般 常用来存储一个有序数据，…...
K8S Ingress 常用配置
目录 介绍ingress 安装 基本使用请查看域名重定向前后端分离配置默认证书配置指定证书配置白名单配置黑名单配置Annotations 配置ConfigMap 配置 匹配请求头速率限制限制客户端的最大连接数限制每秒钟段并发连接数限制每分钟段并发请求突发访问限制限制传输速度速率限制白名单 …...
【K8S】K8S架构及相关组件
文章目录 1 K8S总体架构2 相关组件2.1 控制面板组件2.2 节点组件2.3 附加组件 写在最后 1 K8S总体架构 K8S，全称Kubernetes，是一个开源的容器部署和管理平台，由Google开发，后捐献给云原生计算基金会（CNCF）…...
【MATLAB第108期】基于MATLAB的fast、vbsa、dynia、eet、glue、pawn、rsa敏感性分析模型合集（无目标函数）【更新中】
【MATLAB第108期】基于MATLAB的fast、vbsa、dynia、eet、glue、pawn、rsa敏感性分析模型合集（无目标函数）【更新中】 一、FAST（Fourier Amplitude Sensitivity Test） FAST（Fourier Amplitude Sensitivity Test&#…...
【K8S】为什么需要Kubernetes？
文章目录 1 什么是Kubernetes？2 三种常见的应用部署方式2.1 传统部署2.2 虚拟化部署2.3 容器化部署 3 Kubernetes的特点写在最后 1 什么是Kubernetes？ Kubernetes是 一个开源的，用于管理云平台中多个主机上的容器化应用，Kubernet…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...