CSS函数： 实现数据限阈的数字函数

CSS函数中提供了几个比力实用的数字函数，它可以帮助我们实现一定的数学计算功能。常见的数字函数目前提供了五个：calc()、max()、min()和clamp()函数。其根本实现功能如下：

• calc()：允许在声明 CSS 属性值时执行一些计算。
  
• max()：以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值。其计算使用属性根本和calc()支持属性格式单位一致。
  
• min()：允许从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。其计算使用属性根本和calc()支持属性格式单位一致。
  
• minmax()：定义了一个长宽范围的闭区间，它与CSS 网格布局一起使用。
  
• clamp()：把一个值限定在一个上限和下限之间，当这个值凌驾最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
  

calc()函数之前的文章已经做了先容，本篇文章主要先容其他四个CSS数字函数。
max()函数

max()函数可以让我们获取所有参数表达式中最大的值作为属性的值。参数表达式支持的单位巨细属性：<length>、<angle>、<time>、<percentage>、<integer>，其基础支持单位可以参考：CSS中怎样使用calc()函数。其格式如下：

1. /* property: max(expression [, expression]) */
2. width: max(10vw, 4em, 80px);

复制代码

其中expression 可以为详细的长度数值，也可以是一个表达式单位，表达式基础支持：加法、减法、除法、乘法、取模等。示例代码如下：

1.     <style>
2.         html,
3.         body {
4.             font-size: 14px;
5.         }
7.         .container {
8.             font-size: 20px;
9.         }
11.         .max {
12.             color: red;
13.             font-size: max(3vw,2em, 2rem, 18px);
14.         }
15.     </style>
16.     <div class="container">
17.         <h3>Max()函数使用示例</h3>
19.         <p class="max">Max()函数实现设置字体最大大小</p>
20.     </div>

复制代码

如下为实现效果，可以通过改变窗口实现字体的巨细：

min()函数

min()函数其实现根本与max()函数一致，唯一差别的是max()求取最大值，min()函数求取最小值。其格式如下：

1. /* property: min(expression [, expression]) */
2. width: min(1vw, 4em, 80px);

复制代码

示例代码如下：

1. <style>
2.    html, body {
3.      font-size: 14px;
4.    }
5.    .container {
6.       font-size: 20px;
7.    }     
8.    .min {
9.       color: gold;
10.       font-size: min(3vw,2em, 2rem, 18px);
11.    }
12. </style>
13. <div class="container">
14.     <h3>Min()函数使用示例</h3>
15.     <p class="min">Min()函数实现设置字体最大大小</p>
16. </div>

复制代码

 

minmax()函数

minmax()函数一般与网格布局一起使用，通常与fit-content()、repeat()函数被统称为网格函数。其使用格式如下：

1. /* <inflexible-breadth>, <track-breadth> values */
2. minmax(200px, 1fr)
3. minmax(400px, 50%)
4. minmax(30%, 300px)
5. minmax(100px, max-content)
6. minmax(min-content, 400px)
7. minmax(max-content, auto)
8. minmax(auto, 300px)
9. minmax(min-content, auto)
11. /* <fixed-breadth>, <track-breadth> values */
12. minmax(200px, 1fr)
13. minmax(30%, 300px)
14. minmax(400px, 50%)
15. minmax(50%, min-content)
16. minmax(300px, max-content)
17. minmax(200px, auto)
19. /* <inflexible-breadth>, <fixed-breadth> values */
20. minmax(400px, 50%)
21. minmax(30%, 300px)
22. minmax(min-content, 200px)
23. minmax(max-content, 200px)
24. minmax(auto, 300px)

复制代码

需要注意的是如上的长度设置需要为非负数值，其使用数据格式如下：

• <percentage>：相对于列轨道中网格容器的内联巨细的非负百分比，以及行轨道中网格容器的块长宽。假如网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。
  
• <flex>：单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
  
• max-content：表现网格的轨道长度自适应内容最大的谁人单元格。
  
• min-content：表现网格的轨道长度自适应内容最小的谁人单元格。
  
• auto：作为最大值时，等价于 max-content。作为最小值时，它表现轨道中单元格最小长宽 (由min-width/min-height) 的最大值。
  

示例代码：

1. <style>
2. #container {
3.      display: grid;
4.      grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
5.      grid-gap: 5px;
6.      box-sizing: border-box;
7.      height: 200px;
8.      width: 100%;
9.      background-color: #8cffa0;
10.      padding: 10px;
11. }
13. #container>div {
14.      background-color: #8ca0ff;
15.      padding: 5px;
16. }
18. </style>
20. <h3>minmax()函数使用示例</h3>
21.     <div id="container">
23.         <div>
24.             与内容一样宽,<br />
25.             但是最多300px
26.         </div>
27.         <div>
28.             最少200px,占有其他空余空间宽度
29.         </div>
30.         <div>
31.            固定150px宽度
32.         </div>
33.     </div>

复制代码

clamp()函数

clamp()函数是实现将一个值限定在一个上限、下限地区范围内，当这个值凌驾最小值和最大值范围时，在最小和最大值之间选择一个值使用。接收三个参数：最小值、首选值、最大值。格式如下：

1. clamp(MIN, VAL, MAX)
2. // 实现功能等同于
3. max(MIN, min(VAL, MAX))

复制代码

三个参数使用规则如下：

• 首选值比最小值要小时，则使用最小值。
  
• 首选值介于最小值和最大值之间时，用首选值。
  
• 首选值比最大值要大时，则使用最大值。
  

一般这样我们可以设置固定最大最小值，然后通过表达式方式设置首选值实现动态值得设置。示例代码如下：

1. <style>
2.         html,
3.         body {
4.             font-size: 14px;
5.         }
7.         .container {
8.             font-size: 20px;
9.         }
10.         .clamp {
11.             color: blue;
12.             font-size: clamp(1.8rem, 2.5vw, 2.8rem);
13.         }
15. </style>
16.     <div class="container">
17.         <h3>clamp()函数使用示例</h3>
18.         <p class="clamp">clamp()函数实现设置字体大小，不会小于设置的最小值，也不会超过设置的最大值</p>
19.     </div>

复制代码

欣赏器兼容性

欣赏器 [/td] Chrome   Edge   Firefox   Opera   Safari   Chrome Android   Firefox for Android   Opera Android   Safari on iOS   Samsung Internet   WebView Android [/tr][tr] minmax() [td] 支持 57	支持 16	支持 52	支持 44	支持 10.1	支持 57	支持 52	支持 43	支持10.3	支持 6.0	支持 57
clamp()	支持 79	支持 79	支持 75	支持 66	支持 13.1	支持 79	支持 79	支持 57	支持 13.4	支持 12.0	支持 79
min()	支持 79	支持 79	支持 75	支持 66	支持 11.1	支持 79	支持 79	支持 57	支持 11.3	支持 12.0	支持 79
max()	支持 79	支持 79	支持 75	支持 66	支持 11.1	支持 79	支持 79	支持 57	支持 11.3	支持 12.0	支持 79

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。