你不知道的CSS函数,Min、Max、Clamp()函数基础用法
目录
- 1.Min函数
- 2.Max函数
- 3.clamp函数
- 1.流体尺寸
- 2.反响应式
- 计算工具
- 参考文档
- 3.动态分割线
- 4.兼容性
- 5.总结
1.Min函数
min() 函数会从表达式的值中选择一个最小值作为 CSS 的属性值,支持多值多单位的列表(包括vmax、vmin),如min(1px,2px,3px,4px),一般应该只包含一个具体的绝对单位
,多个绝对单位其实没有意义(仍会选择一个最小的值做对比)。
可以由一个绝对单位和多个计算单位组成,如min(1px,2rem,3vw,4vmax)
width: min(50%, 500px); /* 等同于以下写法 */ width: 50%; min-width: 500px;
浏览器在50%和500px中选择一个最小值,所以最终结果取决于浏览器的视口宽度。如果50%计算值大于500px,那么就选择500px;否则就选择50%的计算值。
如图所示:
2.Max函数
max()与min()用法是一致的,只是min函数返回的是最小值,而max函数返回的是最大值。
width: max(50%, 500px); /* 等同于以下写法 */ width: 50%; max-width: 500px;
代码地址:https://codepen.io/szy018/pen/KKeZNrM
3.clamp函数
clamp()
函数的作用相当于min()和max()的结合,它接收三个参数:最小值、首选值、最大值clamp(MIN, VAL, MAX)
,可以将当前值控制在一个闭区间内。
意思是如果计算结果在最小值和最大值之间时,则使用首选值作为返回值;如果计算结果小于最小值或大于最大值时,就使用最小值或最大值作为返回值。
1.流体尺寸
响应式的页面原理就是根据不同设备大小渲染不同的CSS
,而clamp
函数也是根据VAL
的大小,返回不同的值。所以可以利用clamp
函数来实现响应式布局。clamp可以实现容器宽度自适应,并能控制容器的极限值,这是百分比值没有的控制。
/* 使盒子宽度控制在[300px,500px]内 */ width: clamp(300px, 50vw, 500px); /* 等同于以下写法 */ width: min(300px, max(50vw, 500px));
如图所示:
代码地址:https://codepen.io/szy018/pen/PoaEpye
2.反响应式
还有一个技巧,利用clamp()首选值的负数可以实现反向操作,得到屏幕越大,数值越小的反向响应式效果。
font-size: clamp(1rem, 6.333rem + -10.67vw, 5rem); /* 由于 6.333rem + -10.67vw 的计算值会随着屏幕的变小而增大,实现了一种反向的响应式变化。 */
如下图:
代码地址:https://codepen.io/szy018/pen/BaVJPay
计算工具
中间的首选值可能不太容易计算出来,可以使用这个计算器( https://min-max-calculator.9elements.com ) 得到一个适应的首选值。
这个计算器只需要输入盒子想要的最大值和最小值,以及视口的最大值与最小值,就能够给出一个clamp的首选值结果。
参考文档
如果各位小伙伴想要精确学习一下clamp函数首选值的算法,可以参考文档,里面有比较详细的clamp函数首选值算法,但是字太多了,在下看不明白。https://news.sangniao.com/p/1729687518。
3.动态分割线
响应式中,有时候不同尺寸的视口需要分配不同的排版,如两个元素在大屏下是左右分割排列,在小屏下是上下分割排列。
一般情况下通常会通过媒体查询修改不同尺寸视口的样式,同样也可以通过clamp函数进行实现。
--len: 500px;
width: clamp(200px, (var(--len) - 100%) * 999, 100%);
–len是一个css变量,值为500px。(var(–len) - 100%) * 999为首选值,其中(var(–len) - 100%)相当于拿500px减去视口宽度,所以视口宽度在500px以外时,结果为负数;视口宽度在500px以内时,结果为正数。
而999是一个很大的数,它可以保证即便(var(–len) - 100%)==1px时也能使首选值比最大值大或者比最小值小;所以此时的首选值只有两种值,200px和100%。
(因为我在代码里给图片加了20px的外边距而且还没用弹性盒子,所以在520px时就变化了)
代码地址:https://codepen.io/szy018/pen/wvXpepo?editors=1100
4.兼容性
三个属性算是三位一体了,可能还未普及,兼容性不算特别友好。虽然clamp函数2020年4月才开始被支持,但大部分主流浏览器也都是支持的。
5.总结
clamp函数除了可以应用在width
、margin
、font-size
这些长度属性,还可以在angle
(颜色渐变相关属性)、time
(过度、动画相关属性)、number
(css变量)等几乎所有的css数值上。
不得不说,clamp函数可以节省很多媒体查询的代码,肥肠好用,移动端可以用起来了,但是由于一些浏览器的兼容性,pc端可能还有待考虑。
可以在公司官网使用,一般官网的数据不会有太大的变更,而且IE现在也可以不用考虑了。
你不知道的CSS函数,Min、Max、Clamp()函数基础用法相关推荐
- 设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint点赞再看,微信搜索[大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github. ...
- 一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景
作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,微信搜索**[大迁世界]**关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://gi ...
- [云炬python学习笔记]Numpy中内置函数min(),max(),sum()与Python中内置函数min(),max(),sum()性能对比分析
众所周知,Python有许多内置函数(例如min(),max(),sum()),Numpy也有自己的内置函数(np.min(),np.max(),np.sum()).由于Numpy的函数是在编译码中执 ...
- 【MySQL数据库】MySQL聚合函数、时间函数、日期函数、窗口函数等函数的使用
目 前言 MySQL函数 聚合函数 数学函数 字符串函数 日期函数 控制流函数 窗口函数 序号函数 开窗聚合函数- SUM,AVG,MIN,MAX 前后函数 lag lead 首尾函数first_va ...
- R语言max函数min函数计算各种数据对象最大值最小值实战
R语言max函数min函数计算各种数据对象最大值最小值实战 目录 R语言max函数min函数计算各种数据对象最大值最小值实战 #基本语法
- mysql min函数 结果全为null_MySQL ----- 聚集函数(AVG,SUM,COUNT,MIN,MAX) (十一)
为了汇总数据而不把实际的检索出来,MySQL 提供了专门的函数,聚集函数 好处:可以将检索数据进行分析和报表生成 一.聚集函数(aggregate function): 运行在行组上,计算和返回单个值 ...
- 聚合函数 -AVG/MAX/MIN/STDDEV/VARIANCE/SUM/COUNT/MEDIAN
------------------------------------------聚合函数-----------------------------------------------1: AVG( ...
- python四个带 key 参数的函数(max、min、map、filter)
四个带 key 参数的函数: max()点击查看详细 min()点击查看详细 map()点击查看详细 filter()点击查看详细 1)max(iterable, key) key:相当于对可迭代对象 ...
- Max()函数与Min()函数
在数据库中Max()求最大值,Min()求最小值 用法用例:select max(column_name)/ min() from table_name; 函数括号列中的数据可以是数值,字符串,或者日 ...
最新文章
- JDBC编程:2(数据库的基本操作)
- 主从数据库之互为主备
- CTFshow 命令执行 web64
- php 电压 异常,tv断线警告是什么原因
- 计算机游戏动漫制作自我鉴定,动漫设计专业自我鉴定
- 【讨论】不得不重视的问题:信息太多!信息太杂!
- 百度广告场景大数据治理应用实践
- Hazelcast更换CEO,承诺继续造福开源社区
- C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
- mysql修改记录_MySQL中如何创建、查看、删除、修改表记录
- 超级鹰 古诗文网验证码识别实例
- 什么是服务器?服务器是干什么用的?服务器的基本属性有哪些?怎么配置服务器?怎么挑选适合自己的服务器?
- BZOJ1864: [Zjoi2006]三色二叉树
- 【NOIP2006】【Luogu1063】能量项链
- 让聊天机器人同你聊得更带劲 - 对话策略学习
- 在隐身模式下使用 Chrome 扩展程序
- 华盛顿大学计算机语言学,华盛顿大学人工智能专业排名2020年
- 中科大c语言期末考试试卷,中科大–中科院试卷清单总汇.doc
- toolbar wpf 按钮带文字_Tob设计:中台设计组件按钮
- docker invalid reference format: repository name must be lowercase