在 CSS 中说起函数，我想很多人首先想到是 calc() 数学运算函数，其实在 CSS 中有很多种不同类型的函数，有些“CSS函数”可以在CSS中用于动态计算，比如 calc()函数，计数器函数 counter() 和 counters() 和 CSS比较函数 min()、max() 和 clamp()。尤其是 calc()、min()、max() 和 clamp() 这几个函数，在现代Web开发中所起的作用越来越大，使用的场景越来越多，带来的灵活性和扩展性越来越强。那么在这篇文章中，我们主要和大家一起来探讨 CSS 比较函数在实际开发中能用在哪些地方？又是如何帮助前端构建响应式UI？感兴趣的同学请继续往下阅读。

一直以来大家都不把CSS当作一门编程语言，是因为他不像其他和程序语言一样具有程序语言的特性，比如变量、函数、逻辑运算等。但随着CSS不断的变革，CSS也越来越像一门程序语言，比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大，但他实实在在的在变化，而且有了一定的进步。今天主要和大家来聊CSS中的函数。

CSS函数中的min()、max()和clamp()是CSS值和单位模块第九部分，它们常被称为比较函数。这几个函数并不是什么最新的特性，早在2018年年底就有浏览器开始支持它们，今年4月份Firefox也开始支持这几个函数，这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说，这几个函数可以用来设置元素尺寸，比如容器大小，字号大小，内距，外距等。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。

大家都知道，CSS只是一个声明式的语言，主要为标记语言服务。很多程序员鄙视它，有一部分原因是CSS并不像其他程序语言一样，具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革，其慢慢地也变得越来越强大。时至今日，CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记（Functional Natations）单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值，比如大家熟悉的calc()和不怎么熟悉的min()和max()。而我们今天要聊的是CSS中的函数，其中就包括这些部分。如果大家感兴趣，欢迎继续往下阅读。