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/

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