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/

相关推荐
徐小夕1 天前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing11251 天前
界面规范8-文字
前端·javascript·html
盛夏绽放1 天前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答
江拥羡橙1 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
itslife1 天前
实现 Promise
前端·javascript
小鱼儿亮亮1 天前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
一枚前端小能手1 天前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
至善迎风1 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron
mit6.8241 天前
[Upscayl图像增强] docs | 前端 | Electron工具(web->app)
前端·人工智能·electron·状态模式
闯闯桑1 天前
toDF(columns: _*) 语法
开发语言·前端·spark·scala·apache