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 模块化与逻辑化 打开了新大门。 如果你在做响应式设计，不妨立即试试这个方法。
優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專(zhuān)屬顧問(wèn)
