CSS中 min() max() clamp()函数

引用文章

https://blog.csdn.net/ZYS10000/article/details/122755672https://blog.csdn.net/ZYS10000/article/details/122755672

我们希望元素的最大宽度为500px。

复制代码
.element {
  width: min(50%, 500px);
}

我们希望元素的最小宽度为500px。

复制代码
.element {
  width: max(50%, 500px);
}

我们希望元素的最小宽度为200px,首选值为50%,最大值为1000px。

clamp() 的语法非常简单:clamp(MIN, PREFERRED, MAX)

复制代码
.element {
/*clamp(最小值,首选值,最大值)*/
  width: clamp(200px, 50%, 1000px);
}
相关推荐
Csvn5 小时前
工程化专题 | 改完组件保存,浏览器毫无反应,重启 dev server 又好了——气不气?
前端
我有满天星辰5 小时前
Vue 指令完全指南:从 Vue 2 到 Vue 3 的演进与实战
前端·javascript·vue.js
光影少年5 小时前
RN 渲染原理:不依赖WebView,原生控件渲染
前端·react native·react.js·前端框架
小白学过的代码5 小时前
# flv.js / mpegts.js 播不了国标摄像头(H.265 + G.711A)?纯前端 Jessibuca 无后端方案(附完整代码)
前端·javascript·h.265
console.log('npc')5 小时前
AI Agent 前端流式渲染核心技术文档(SSE \+ WebSocket \+ 打字机渲染)
前端·人工智能·websocket
法外狂徒15 小时前
将 Pi Agent 接入 HagiCode 的实践之路
服务器·前端·人工智能
IT_陈寒5 小时前
React中useEffect的依赖项把我坑惨了
前端·人工智能·后端
广州华水科技6 小时前
单北斗GNSS在变形监测中的优势与应用分析
前端
程序员爱钓鱼7 小时前
Rust 变量与不可变性:为什么默认不能修改变量?
前端·后端·rust
随风一样自由7 小时前
【前端工程化】前端工程化解耦实践:从问题分析到架构重构
前端·重构·架构