【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);
}
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css