当前位置： 首页 > news >正文

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

news 2026/6/4 15:09:33

本示例节选自小卷全栈开发实战系列的《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赞，将随文附赠录屏讲解，感谢…...

编程日记 2024/8/11 6:03:52

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_…...

编程日记 2024/8/11 5:58:47

谈基于大语言模型的图数据库路径检索

随着微软已经开源了GraphRAG项目的代码，基于图数据库的RAG 热度迅速升温。关注基于大语言模型与图模型数据库相结合的技术的人多了起来。 本文提出了一种类似人工搜索的“顺藤摸瓜”方法，实现图数据库的智能搜索方法。 本地私有数据存储和查询 本地私有…...

编程日记 2024/8/11 5:57:46

XHTML 简介

XHTML 简介 XHTML，即“可扩展超文本标记语言”（eXtensible HyperText Markup Language），是一种基于XML的标记语言，旨在取代HTML作为网页内容的标准格式。XHTML继承了HTML的基本结构，但更加严格和规范&…...

编程日记 2024/8/11 5:55:44

驱动开发系列10 - Linux Graphics 图形栈介绍

目录 一：Linux 图形栈总体结构 1. 整体图形栈: 2. 现代3D图形栈： 二：Xorg 介绍 Xorg 概述： Xorg的发展历史： Xorg绘制原理： Xorg的缺点： 三：Wayland 介绍 一：Linux 图形栈总体结构 1. 整体图形栈: 应用程序->桌面环境->GUI框架->Display Client->Displ…...

编程日记 2024/8/11 5:54:42

Docker快速入门指南

🛠️ Docker 应用场景 Docker 是一个开源的平台，旨在简化应用程序的开发、部署和管理。它通过容器技术，将应用及其所有依赖打包在一个标准化的环境中，从而确保应用在不同环境中的一致性和可移植性。在 Python 爬虫的场景中&#…...

编程日记 2024/8/11 5:53:41

VS Code中使用MSVC编译C++程序

前置条件 1. VS Code配置C开发环境 2. CMake安装 3. VS安装（MSVC编译器） 4. 环境变量配置（重要！！！） ​​​​使用msvc的cl工具编译程序，以及 “fatal error C1034: iostream: 不包括…...

编程日记 2024/8/11 5:52:40

四数之和（LeetCode）

题目 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1a; 0 <…...

编程日记 2024/8/11 5:50:38

学习使用备份软件BorgBackup

Time Machine是官方提供的强大备份系统&#xff0c;它能够备份macOS系统的一切&#xff0c;包括文件、照片、网页纪录、帐号密码以及安装过的软件等。如果系统出了问题&#xff0c;使用”时光回溯“&#xff0c;系统就能回到任意记录点&#xff0c;用过的多说好&#xff01; B…...

编程日记 2024/8/11 5:49:37

Java 实现合并两个有序链表：递归与迭代

Java 实现合并两个有序链表&#xff1a;递归与迭代 在面试和算法题中&#xff0c;合并两个有序链表是一个经典问题。通过这个问题&#xff0c;不仅可以考察候选人的基础数据结构掌握情况&#xff0c;还能测试他们对递归和迭代等编程技巧的应用能力。 本文将讨论如何使用 Java…...

编程日记 2024/8/11 5:48:36

【每日刷题】Day98

【每日刷题】Day98 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 大数加法_牛客题霸_牛客网 (nowcoder.com) 2. 大数乘法_牛客题霸_牛客网 (nowcoder.com) 3. 扑克牌…...

编程日记 2024/8/11 5:45:33

51单片机-LED实验二

使用51单片机进行LED灯的实验&#xff0c;使用8个LED灯展示二进制数&#xff0c;使用独立按键控制二进制数的加法&#xff0c;每次按下独立按键K2&#xff0c;就让二进制数加一&#xff0c;定义了一个LedNum,表示二进制数&#xff0c;二进制数取反之后可以得到输出到LED端口的8…...

编程日记 2024/8/11 5:43:31

批发行业进销存-webview 读取NFC，会员卡 源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

一、混合应用开发 混合应用顾名思义就是网页html和原生APP共同作用的结果 好处在一既有web的跨平台优势&#xff08;安卓、苹果&#xff0c;电脑、国产电脑、平板电脑&#xff0c;自助机都能用&#xff09; 好处二可以离线使用&#xff0c;比较稳定 好处三可以与本地硬件交…...

编程日记 2024/8/11 5:39:28

博弈dp，CF 731E - Funny Game

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 731E - Funny Game 二、解题报告 1、思路分析 游戏规则其实就是交替取前缀和 考虑 f(i) 为 某人先手取前 i 个&#xff0c;最终能得到的最大分差 由于每人都是最佳发挥&#xff0c;所以有如下状态转移&am…...

编程日记 2024/8/11 5:38:27

基础知识：深入理解MongoDB、MySQL与Redis的应用与实践

基础知识&#xff1a;深入理解MongoDB、MySQL与Redis的应用与实践 在现代应用开发中&#xff0c;数据库系统的选择对于系统的性能、扩展性和维护性有着至关重要的影响。MongoDB、MySQL 和 Redis 是三种流行的数据库技术&#xff0c;它们各自有着独特的特点和适用场景。本文将详…...

编程日记 2024/8/11 5:37:26

Reids中List类型、Set类型、SortedSet类型的常用指令

List类型&#xff1a; Redis中的List类型与Java中的LinkedList类似&#xff0c;可以看做是一个双向链表结构。既可以支持正向检索和也可以支持反向检索。 特征也与LinkedList类似&#xff1a; 有序元素可以重复插入和删除快查询速度一般 常用来存储一个有序数据&#xff0c…...

编程日记 2024/8/11 5:36:25

K8S Ingress 常用配置

目录 介绍ingress 安装 基本使用请查看域名重定向前后端分离配置默认证书配置指定证书配置白名单配置黑名单配置Annotations 配置ConfigMap 配置 匹配请求头速率限制限制客户端的最大连接数限制每秒钟段并发连接数限制每分钟段并发请求突发访问限制限制传输速度速率限制白名单 …...

编程日记 2024/8/11 5:34:23

【K8S】K8S架构及相关组件

文章目录 1 K8S总体架构2 相关组件2.1 控制面板组件2.2 节点组件2.3 附加组件 写在最后 1 K8S总体架构 K8S&#xff0c;全称Kubernetes&#xff0c;是一个开源的容器部署和管理平台&#xff0c;由Google开发&#xff0c;后捐献给云原生计算基金会&#xff08;CNCF&#xff09;…...

编程日记 2024/8/11 5:32:21

【MATLAB第108期】基于MATLAB的fast、vbsa、dynia、eet、glue、pawn、rsa敏感性分析模型合集（无目标函数）【更新中】

【MATLAB第108期】基于MATLAB的fast、vbsa、dynia、eet、glue、pawn、rsa敏感性分析模型合集&#xff08;无目标函数&#xff09;【更新中】 一、FAST&#xff08;Fourier Amplitude Sensitivity Test&#xff09; FAST&#xff08;Fourier Amplitude Sensitivity Test&#…...

编程日记 2024/8/11 5:31:20

【K8S】为什么需要Kubernetes？

文章目录 1 什么是Kubernetes&#xff1f;2 三种常见的应用部署方式2.1 传统部署2.2 虚拟化部署2.3 容器化部署 3 Kubernetes的特点写在最后 1 什么是Kubernetes&#xff1f; Kubernetes是 一个开源的&#xff0c;用于管理云平台中多个主机上的容器化应用&#xff0c;Kubernet…...

编程日记 2024/8/11 5:30:19

AI智能体架构设计：从成本黑洞到价值引擎的解耦之道

1. 从成本黑洞到价值引擎&#xff1a;为什么你的AI智能体架构正在吞噬预算又到了季度技术复盘会&#xff0c;财务那边递过来的云账单和工程人力成本&#xff0c;是不是又让你倒吸一口凉气&#xff1f;你看着报表上那个名为“AI智能体平台”的项目&#xff0c;它的资源消耗曲线几…...

编程新知 2026/5/26 5:04:27

别再乱用分支了！Flowable四种网关（排他/并行/包容/事件）实战选型指南

Flowable四大网关实战选型&#xff1a;从混乱到精准的决策艺术当你在设计一个请假审批流程时&#xff0c;是否遇到过这样的困惑&#xff1a;部门经理审批后需要同时通知HR和财务&#xff0c;但某些特殊情况下又需要跳过财务直接归档&#xff1f;这种看似简单的业务需求&#xf…...

编程新知 2026/5/26 4:16:17

智慧无人机巡检-无人机可见光红外数据集 无人机多模态检测数据集 红外与可见光检测数据集

智慧无人机巡检-无人机可见光红外数据集&#xff0c;已完成标注&#xff0c;可导出各种常用数据集&#xff0c;yolo&#xff0c;voc&#xff0c;coco等格式。可见光33000张&#xff0c;红外16100张&#xff0c;目标一张一个 无人机可见光红外目标数据集项目详细信息数据集名称无…...

编程新知 2026/5/26 1:27:06

销售怎么通过各种方法获取电话号码

第一种就是那个用爬虫电话号码&#xff0c;然后再打电话给客户。第二种是在别人的挪车电话看车挪车电话&#xff0c;然后再打电话找客户。第三就是。扫楼一顿顿的扫&#xff0c;第四就是这个那种商店&#xff0c;一个个的去问陌拜地推一个个的问店子要不要贷款&#xff0c;去问…...

编程新知 2026/5/26 1:13:04

金融合规审核为何人力堆积却仍漏洞百出？2026年RegTech演进与Agent全链路闭环解决方案

在2026年的金融监管环境下&#xff0c;合规审核已不再是简单的“查漏补缺”&#xff0c;而是演变为一场高强度的算力与逻辑博弈。尽管金融机构在合规成本上的投入逐年攀升&#xff0c;甚至不惜以“人海战术”填补流程断点&#xff0c;但监管罚单的数额与频率却并未显著下降。这…...

编程新知 2026/5/26 0:36:28

光轮智能 谢晨 访谈总结机器人仿真数据产业

光轮智能 谢晨 访谈总结机器人仿真关于创始人关于数据数据金字塔数据痛点仿真数据的重要性仿真数据的质量b站链接地址公司官网关于创始人 清华物理&#xff1b;哥伦比亚金融&#xff1b;英伟达智驾仿真&#xff1b;小鹏智驾仿真&#xff1b;现为光轮智能CEO 关于数据 数据的…...

编程新知 2026/5/25 23:43:44

手把手教你用Mind+和Blynk，让手机轻松遥控掌控板（含自建服务器避坑指南）

从零搭建物联网控制平台&#xff1a;Mind与Blynk深度整合实战 当你第一次尝试用手机控制硬件设备时&#xff0c;那种"隔空取物"的奇妙感总会让人兴奋不已。想象一下&#xff0c;躺在沙发上就能调节书桌上的智能台灯亮度&#xff0c;或者在外出时随时查看家中的温湿度…...

编程新知 2026/5/25 21:47:59

Vue2-Verify：解决前端验证码安全性与用户体验平衡问题的技术方案实现

Vue2-Verify&#xff1a;解决前端验证码安全性与用户体验平衡问题的技术方案实现 【免费下载链接】vue2-verify vue的验证码插件 项目地址: https://gitcode.com/gh_mirrors/vu/vue2-verify 在当今Web应用开发中&#xff0c;验证码作为防止自动化攻击的关键安全组件&…...

编程新知 2026/5/25 21:07:32

DIY四路自动音频源切换器：从信号检测到继电器隔离的完整设计

1. 项目概述与核心需求解析作为一个喜欢在工作室里捣鼓各种音频设备的玩家&#xff0c;我经常遇到一个挺烦人的问题&#xff1a;我的功放只有一组输入&#xff0c;但我想接的设备却有好几个——台式电脑、平板、蓝牙接收模块&#xff0c;还有一台树莓派。每次想切换音源&#x…...

编程新知 2026/5/25 20:59:15

接口测试用例设计：超详细防御体系与分层校验实践

1. 为什么“超详细”三个字在接口测试用例里不是修饰词&#xff0c;而是生死线我带过三支不同行业的测试团队——金融支付、SaaS中台、IoT设备管理平台。每次新人入职第一周&#xff0c;我都会收走他们写的前5条接口测试用例&#xff0c;逐行标红批注。不是因为格式不对&#x…...

编程新知 2026/5/25 19:11:38