CSS实现文字大小自适应

遇到的问题: 在写页面的时候,兼容手机和PC页面,这样字体大小就需要根据页面的大小进行动态变化。

解决方法: clamp()函数
clamp() 函数的作用是把一个值限制在一个上限和下限区间,当这个值超过区间范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
clamp()函数文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp

使用方法:

下面代码的意思是: 假设浏览器窗口最小300px,最大1200px,当窗口小于300px的时候字体大小为1rem,当窗口大于1200px的时候,字体大小为1.875rem,否则就使用区间的首选值(0.682rem + 1.59vw)。

.value {font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

不会计算的用下面这个网站算就可以:
https://min-max-calculator.9elements.com/

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662859.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLO系列助力涨点!新SOTA让缺陷检测更准更快!附开源数据集下载

缺陷检测在工业自动化、质量控制、安全检测等多个实际应用中都有着广泛的需求。因此这个方向是相对容易发表高质量论文的,尤其是当研究涉及到创新的算法、改进的技术、新的应用场景或显著提高检测性能时。 在这其中,YOLO系列算法与缺陷检测的结合已经取…

composer常用命令

查看全局配置信息 composer config -gl 设置镜全局像地址 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 去掉-g,即表示只有当前项目使用该镜像 批量安装composer项目依赖 composer install 执行该命令后,会读取当…

MySQL中where和having的区别

前言 数据库中的 WHERE 和 HAVING 子句在 SQL 查询中扮演着关键的角色,帮助我们有效地筛选和过滤数据。这两个子句虽然都用于限定结果集,但它们的应用场景和操作对象存在明显的区别。在理解和运用这两个子句的过程中,我们能够更灵活地进行数据…

【C语言】顺序表详解

目录 (一)顺序表是一种数据结构 (二)顺序表 (1)顺序表的必要性 (2)顺序表的概念及结构 i,线性表 (3)顺序表的分类 i,顺序表和…

Android SELinux:保护您的移动设备安全的关键

Android SELinux:保护您的移动设备安全的关键 1 引言 移动设备在我们的生活中扮演着越来越重要的角色,我们几乎把所有重要的信息都存储在这些设备上。然而,随着移动应用程序的数量不断增加,安全性也变得越来越关键。这就是为什么…

海洋鱼类检测7种YOLOV8NANO

【免费】海洋鱼类检测,7种类型,YOLOV8训练,转换成ONNX,OPENCV调用资源-CSDN文库 采用YOLOV8NANO训练模型,得到PT模型,然后转换成ONNX,供OPENCV的DNN调用,摆脱PYTORCH依赖&#xff0c…

算法设计与分析实验:最短路径算法

一、网络延迟时间 力扣第743题 本题采用最短路径的思想进行求解 1.1 具体思路 (1)使用邻接表表示有向图:首先,我们可以使用邻接表来表示有向图。邻接表是一种数据结构,用于表示图中顶点的相邻关系。在这个问题中&am…

轻松打造智能化性能测试监控平台:【JMeter+Grafana+Influxdb】的优化整合方案

在当前激烈的市场竞争中,创新和效率成为企业发展的核心要素之一。在这种背景下,如何保证产品和服务的稳定性、可靠性以及高效性就显得尤为重要。 而在软件开发过程中,性能测试是一项不可或缺的环节,它可以有效的评估一个系统、应…

C语言·贪吃蛇游戏(下)

上节我们将要完成贪吃蛇游戏所需的前置知识都学完了,那么这节我们就开始动手写代码了 1. 程序规划 首先我们应该规划好我们的代码文件,设置3个文件:snack.h 用来声明游戏中实现各种功能的函数,snack.c 用来实现函数,t…

探索Web3.0:下一代互联网的新篇章

随着技术的不断演进和社会的持续发展,我们正逐渐迈入Web3.0时代。Web3.0,作为下一代互联网的代名词,不仅仅是技术的进步,更是一种全新的数字化生态系统,其所带来的影响将深刻地改变着我们的生活、工作和交流方式。 什…

Java二维码图片识别

前言 后端识别二维码图片 代码 引入依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>3.2.1</version></dependency><dependency><groupId>com.google.zxing<…

tuya-open-sdk-for-device使用体验之Windows 下 MSYS2 编译 T2-U 开发板

tuya-open-sdk-for-device 是一款跨芯片平台、操作系统的 IoT 开发框架。它基于通用南向接口设计&#xff0c;支持 Bluetooth、Wi-Fi、Ethernet 等通信协议&#xff0c;提供了物联网开发的核心功能&#xff0c;包括配网&#xff0c;激活&#xff0c;控制&#xff0c;升级等&…

2024美赛A题完整思路代码分析:建立竞争机理方程+遗传算法优化

A题是自由度比较大的场景限定下的模型构建&#xff0c;相对比较容易&#xff0c;核心是找到现有的成熟的数学模型&#xff0c;然后找到合适的数据进行证明得到结论&#xff0c;估计大部分是目标优化问题。&#xff08;不限制专业&#xff09; B题属于较为经典的物理建模&#…

【竞技宝】LOL:Able小炮连续起跳收割战场 OMG2-0轻取TT

北京时间2024年2月2日&#xff0c;英雄联盟LPL2024春季赛在昨天迎来第二周第四个比赛日&#xff0c;本日首场比赛由TT对阵OMG。本场比赛&#xff0c;TT在前中期和OMG有来有回&#xff0c;然而中后期的大龙团战始终不是OMG的对手&#xff0c;最终OMG2-0轻取TT。以下是本场比赛的…

linux vim 异常退出 异常处理 交换文件

交换文件 *.swp 格式 同时是隐藏的 如在vim一个文件&#xff0c; 在没有正常退出&#xff0c; 如直接断开连接 在次编辑这个文件 会出现下图的错误 解决方案&#xff1a; 直接删除这个交换文件即可 rm -fr .zen.txt.swp

唐墓惊现石椁,文物预防性保护系统未雨绸缪

一、文物保护的急需解决和科技的支持 陕西省考古学会近日宣布&#xff0c;考古团队在西安揭开了唐睿宗李旦孙媳妇薛柔顺墓的神秘面纱&#xff0c;其中出土的一具完整石椁&#xff0c;雕刻精湛、线条流畅&#xff0c;实属罕见珍宝。唐代石椁本就稀少&#xff0c;此次发现更是为…

RK3588开发板Ubuntu与开发板使用U盘互传

1 将 U 盘(U 盘的格式必须为 FAT32 格式&#xff0c;大小在 32G 以下)插到开发板的 usb 接口&#xff0c;串口打印信息如下所示&#xff0c;U 盘的设备节点是/dev/sdb4。U 盘的设备节点不是固定的&#xff0c;根据实际情况来查看设备节点。 2 输入以下命令挂载 U 盘&#xff0c…

Leetcode—2670. 找出不同元素数目差数组【简单】

2024每日刷题&#xff08;一零七&#xff09; Leetcode—2670. 找出不同元素数目差数组 哈希表实现代码 class Solution { public:vector<int> distinctDifferenceArray(vector<int>& nums) {unordered_set<int> s;int n nums.size();vector<int&g…

Qwen-VL 技术报告总结

感谢如此优秀的开源工作,仓库链接 Qwen-VL 权重分为 Qwen-VL && Qwen-VL-Chat,区别文档稍后介绍 训练过程 在第一阶段中主要使用224X224分辨率训练,训练数据主要来源是公开数据集,经过清洗,数据总量大约是1.4B,中文数据和英文j训练目标是视觉语言和文本语言对齐。…

docker集成 nacos/nacos-server (包括踩的坑)

tips 这边需要的数据库我已经安装好了&#xff0c;所以数据库的安装这边已经省略了 拉取镜像&#xff08;这边使用nacos1.4.1作为例子&#xff09; docker pull nacos/nacos-server:1.4.1创建映射的文件夹 (conf存放配置文件&#xff0c;logs存放日志文件) mkdir -p /data/n…