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開發）、微信定制開發（微信官網、微信商城、企業微信）等一系列互聯網應用服務。
公安局備案號：
專屬顧問
