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/

相关推荐
anOnion3 分钟前
Agentic 前端开发之 实时显示 AI Agent 终端输出
前端·javascript·人工智能
随风一样自由13 分钟前
【前端领域】2026最新前端领域全梳理(框架/工具/AI/跨端/底层标准/就业趋势)
前端·人工智能·前端框架
这是个栗子14 分钟前
【前端性能优化】优化数据加载:用 Promise.all 从串行到并行
前端·javascript·性能优化·异步编程·前端优化·promise.all
fei_sun1 小时前
黑洞路由(Null Route/空接口路由)
服务器·前端·javascript
大爱一家盟1 小时前
告别卡点BGM同质化 2026原创卡点音乐素材下载网站 TOP5 推荐
大数据·前端·人工智能
彦为君1 小时前
算法思维与经典智力题
java·前端·redis·算法
aa小小2 小时前
localhost 访问异常排查笔记
前端
格子软件2 小时前
2026年GEO优化系统源码的分布式状态机深度拆解
java·前端·vue.js·vue·geo
陈随易2 小时前
Rust、Golang、MoonBit 编译成 WASM,体积和速度差距有多大?
前端·后端·程序员
IT_陈寒2 小时前
Python多线程的坑,我居然现在才踩到
前端·人工智能·后端