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/

相关推荐
我血条子呢13 小时前
【Vite】离线打包@iconify/vue的图标
前端·javascript·vue.js
一个有理想的摸鱼选手13 小时前
CesiumLite-一行代码让你在Cesium中实现标绘测量
前端·gis·cesium
1024小神13 小时前
swiftui和uikit的桥梁:UIViewRepresentable、Coordinator
前端
岁月宁静13 小时前
从 JavaScript 到 Python:前端工程师的完全转换指南
前端·javascript·python
特严赤傲13 小时前
在 Vue 中 v-for的写法对语法高亮的影响
前端·javascript·vue.js
PBitW13 小时前
从前端工程师的角度将SEO做到极致 -- 菜鸟来实操
前端·seo
雨雨雨雨雨别下啦13 小时前
【从0开始学前端】vue3路由,Pinia,组件通信
前端·vue.js·vue
调皮LE13 小时前
前端 HTML 转 PDF
前端
Nan_Shu_61413 小时前
熟悉RuoYi-Vue-Plus-前端 (1)
前端·javascript·vue.js
23124_8013 小时前
网络管理-1
运维·服务器·前端