css`min()` 、`max()`、 `clamp()`

min() 用来计算多个数值中最小的那个,非常适合做自适应。

width: min(50vw, 500px)

50vw 表示 视口宽度的 50%

500px 表示 500px
min(50vw, 500px) 表示会取两者中 最小的那个 作为最终的宽度,。

使用场景

  1. 限制某个元素宽度不超过某个值; 响应式布局
    width: min(90%, 1200px)

    ✅当屏幕宽度很大时,保持最大 1200px

    ✅ 当屏幕较小时,保持 90% 宽度

  2. 字体大小自适应

font-size: min(8vw, 32px)

小屏幕时,按视口缩小

大屏幕时,最大为32px,避免过大

  1. 结合其他函数使用

width: min( max(200px, 30%), 600px )

max()先保证 宽度最小不低于200px ,

min() 保证最大不超过600px

width: max(200px, 30%)

表示取 两者中最大的那个,保证宽度不低于200px;

clamp(min, preferred, max) 是 min() 和 max() 的组合,可以更简洁。

html 复制代码
min(90%, 1200px) 
 └── 取更小的值 ──> 保证不超过 1200px

max(300px, 40%) 
 └── 取更大的值 ──> 保证不小于 300px

clamp(16px, 4vw, 32px)
 └── 当屏幕变宽时字体逐渐变大,但最小 16px,最大 32px

See the Pen css: `min()/max()/clamp()` by liu874396180 ( @liu874396180) on CodePen.

相关推荐
Lovereo15 分钟前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
蒙娜丽宁21 分钟前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花21 分钟前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端22 分钟前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风24 分钟前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我28 分钟前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js
白水清风28 分钟前
Vue3之组件化
前端·vue.js·面试
边洛洛31 分钟前
解决[PM2][ERROR] Script not found: D:\projects\xxx\start
前端·javascript
农夫山泉的小黑1 小时前
【DeepSeek帮我准备前端面试100问】(十八)Reflect在vue3的使用
前端·面试
Achieve前端实验室1 小时前
【每日一面】手写防抖函数
前端·面试·node.js