2025 年 8 月 6 日，Chrome 139 正式发布，其中一个引人注目的新特性是 CSS 支持自定义函数。 这意味着，我们可以在 CSS 中像写 Sass 或 JS 一样定义和调用函数，让样式逻辑更加灵活、可复用。
官方在 New in Chrome 139 中给出了一个简单示例：
@function --negate(--value) {
result: calc(var(--value) * -1);
}
这个变化大大扩展了 CSS 的能力。本文将带你用 CSS 函数 来编写一个可复用的 Fluid Layout 函数，让响应式设计更简单、更优雅。
什么是 Fluid Layout？
Fluid Layout（流式布局） 是一种结合了 绝对单位（px、rem 等）与 相对单位（vw、vmin 等）优势的响应式布局技术。 它通常借助 CSS 的 clamp() 函数来实现：
最小值：防止字体或元素过小 最大值：防止字体或元素过大 中间值：根据屏幕宽度自动计算
例子：
font-size: clamp(32px, 2.5vw, 64px);
这样，当屏幕变小时字体不会小于 32px，变大时不会超过 64px，中间值则自动平滑过渡。
传统实现的痛点
clamp() 的缺点是 中间值计算复杂，需要手动写成类似：
clamp(32px, calc(2.86vw + 22.86px), 64px);
假设你要做一个最小值 32px、最大值 64px、屏幕范围 320px ~ 1440px 的字体大小，就必须计算一个复杂公式。 如果任意一个值（比如最大屏宽）改变，就得重新计算中间值，非常麻烦。
过去，很多人会用 Fluid Layout Maker 之类的在线工具计算，再复制粘贴到 CSS 中。 但这种方式不够灵活，不便于频繁调整。
CSS 函数的全新解决方案
有了 CSS 自定义函数，我们可以直接把计算逻辑封装起来，只需传入四个参数：
最小值（px） 最大值（px） 最小屏宽（px） 最大屏宽（px）
函数会自动生成 clamp() 公式。
示例代码如下：
@function --fluid(--min-size, --max-size, --min-screen-size, --max-screen-size) {
result: clamp(
calc(var(--min-size) * 1px),
calc(
(var(--max-size) - var(--min-size))
/ (var(--max-screen-size) - var(--min-screen-size))
* (100vw - var(--min-screen-size) * 1px)
+ var(--min-size) * 1px
),
calc(var(--max-size) * 1px)
);
}
使用示例
调用函数非常直观：
h1 {
font-size: --fluid(32, 64, 320, 1440);
}
这样，你就得到了一个字体大小随屏幕宽度平滑变化、并且有最大最小限制的 流式字体布局。 无需手动计算任何中间值，修改参数也只需改一行。
总结
以前：需要手动计算复杂的 clamp()中间值，或者依赖外部工具。现在：直接用 CSS 函数封装逻辑，传参即可生成响应式数值。 好处：更直观、可维护性高、响应式布局开发效率大幅提升。
CSS 自定义函数的出现，不仅让 Fluid Layout 更易用，还为未来的 CSS 模块化与逻辑化 打开了新大门。 如果你在做响应式设计，不妨立即试试这个方法。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
