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/

相关推荐
因_崔斯汀17 分钟前
ECharts 区域地图可视化实战:以山东地图为例
前端
Bacon25 分钟前
手摸手带你搞清楚 AI Agent 的六大核心概念
前端·人工智能
王林不想说话26 分钟前
TypeScript 进阶知识总结:从 extends、泛型到 infer,一篇打通 TS 类型系统
前端·javascript·typescript
罗超驿32 分钟前
15.JavaScript 函数与作用域完全指南:语法、参数、表达式与作用域链实战
开发语言·前端·javascript
.千余33 分钟前
【C++】C++类与对象2:C++构造函数、运算符重载与流输入输出全面解析
c语言·开发语言·前端·c++·经验分享
星栈1 小时前
Rust 单二进制部署,真没你想的那么“单”
前端·后端
angerdream1 小时前
Android手把手编写儿童手机远程监控App之webrtc聊天数据通道
前端
浩风祭月2 小时前
受够了每次切分支都要重装依赖:一份 Git 工作流优化指南
前端·ai编程
谭光志2 小时前
如何从零开始实现一个 AI Agent CLI
前端·javascript·ai编程
半个落月2 小时前
彻底搞懂 JavaScript 变量提升(Hoisting)—— 从现象到底层原理
前端·javascript