【CSS】min 和 max 函数(设置最大最小值)

文章目录

  • min() 函数:允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
css 复制代码
width: min(1vw, 4em, 80px);
  • max() 函数:让你可以从一个逗号分隔的表达式列表中选择最大(正方向)的值作为属性的值
css 复制代码
width: max(10vw, 4em, 80px);
  • 注意事项:
  1. max或min允许将max()和其他min()函数嵌套为表达式值。这些表达式是完整的数学表达式,因此可以直接使用加、减、乘、除运算,而无需使用calc()函数本身。
  2. 使用标准的运算符优先规则,表达式可以是加(+)、减(-)、乘(*)和除(/)运算符的组合值。
  3. 请确保+-操作数两边各加一个空格。表达式中的操作数可以是任意的<语法的价值。
  4. 你可以在表达式中为每个值使用不同的单位。还可以在需要时使用括号来确定计算顺序。
  5. 你经常需要合并min()max()的值,或者在clamp()calc()函数中使用min()
css 复制代码
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
相关推荐
用户79747611273几秒前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia2 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo11 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093114 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙14 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试
水痕0119 分钟前
nginx一个域名下部署多套前端项目
运维·前端·nginx
Anyin22 分钟前
Spring AI Alibaba - DeepResearch 前端主体 UI 构建
前端·ai编程·trae
非优秀程序员22 分钟前
8 个提升开发者效率的小众 AI 项目
前端·人工智能·后端
河畔一角30 分钟前
一些感悟
前端
excel36 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端