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系列算法与缺陷检测的结合已经取…

malloc()函数、结构体、共用体、枚举 2月1日学习笔记

一、malloc()函数 void* malloc(size_t size); 用于动态分配内存空间。 link (int*)malloc(size(int)); //申请一段为int大小的内存空间。 int* p (int*)malloc(sizeof(int)) 分配了一个 int 类型大小的内存空间,并将其起始地址赋给指针…

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

golang sudog是什么?

sudog代表在等待队列中的goroutine,比如channel发送接受。由于goroutine和同步对象的关系是多对多,因此需要sudog映射 type sudog struct {// 指向的goroutineg *g// 指向前后sudog的指针next *sudogprev *sudog// 指向数据elem unsafe.Pointer // data…

【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…

SQL中聚合函数

SQL中的聚合函数是用于对一组值执行计算,并返回单个值的函数。它们通常在SELECT语句的SELECT列表中使用,并与GROUP BY子句结合使用来汇总数据。聚合函数忽略NULL值,只对非NULL值进行计算。以下是一些最常用的SQL聚合函数: 1. COU…

基于python的新闻爬虫

咱们这个任务啊,就是要从一个指定的网站上,抓取新闻内容,然后把它们整整齐齐地保存到本地。具体来说,就是要去光明网的板块里,瞅瞅里面的新闻,把它们一条条地保存下来。 首先,咱得有个网址&…

[python] os.waitpid

os.waitpid() 是 Python 中用于等待子进程改变状态的函数。这个函数是 os 模块的一部分,它提供了一个方式来收集子进程的状态信息,或者等待子进程结束。os.waitpid() 函数是 Unix/Linux 系统上的系统调用 waitpid() 的封装。 使用 os.waitpid() os.wai…

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

一、网络延迟时间 力扣第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。以下是本场比赛的…