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)。

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

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

相关推荐
黄金决明子8 分钟前
浏览器Window底层操作全解
前端·javascript
ydyd2026042129 分钟前
设备OEE怎么提升?数据采集+分析优化的完整方案
java·服务器·前端
(╹◡╹)1 小时前
11.RK3588本地大模型内存评估优化
java·linux·前端
电气研究所1 小时前
Java + Redis 实现工业设备告警去抖,避免变频器故障重复推送
java·前端
AI视觉网奇1 小时前
cannot import name ‘model_urls‘ from ‘torchvision.models.resnet‘
linux·前端·javascript
Vuji1 小时前
深入 pi-agent 内核:完整追踪一次 CLI 交互的完整链路
前端·agent
zfoo-framework1 小时前
安装pi agent 支持duojie和deepseek
java·服务器·前端
l1m0_2 小时前
告别反复修改Prompt:AI生成React应用并落地开发的实战复盘
前端·react.js·ui·ai·设计
xexpertS2 小时前
前端工程转型实践:从 Ember 迁移到 React,提升构建速度与研发效能
前端·react.js·前端框架