Bricks 流体排版：用 clamp() 让间距字号随屏幕自动缩放

什么是流体排版

流体排版（Fluid responsive design），说人话就是：页面的内边距（padding）、外边距（margin）、字号这些尺寸，能根据显示宽度自己连续调整，而不是在几个断点之间“跳变”。

想象一个页面：桌面端宽，边距就大；手机端窄，边距自动变小。视觉上更和谐，也不会出现“内容贴着屏幕边”的尴尬。

新手常犯的一个错是根本没设内边距——结果文字紧贴屏幕边缘，观感差、阅读累。流体排版恰好能优雅解决这个问题。

clamp() 函数怎么用

实现这种“自动连续变化”的效果，核心是 clamp() 函数。

clamp(MIN, VAL, MAX)

它是一个数学函数，把一个值限制在上限和下限之间，接收三个参数：

• MIN：最小值（比如手机端的最小内边距）
• VAL：首选值，通常用 calc() + 视口单位 vw 算出一个随宽度变化的中间值
• MAX：最大值（比如桌面端的最大内边距）

浏览器会在 MIN 和 MAX 之间，取 VAL 算出来的值。视口变宽，VAL 增大，但不超过 MAX；视口变窄，VAL 减小，但不低于 MIN。

在 Bricks 里落地流体间距

把 clamp() 接进上一讲的设计体系变量，就能全局复用。比如一个随屏幕变化的区块水平内边距：

--section-padding-x: clamp(1.5rem, calc(1.5rem + ((1vw - 0.29875rem) * 0.7772)), 1.875rem);

拆开看：手机端最小 1.5rem，桌面端最大 1.875rem，中间随 1vw 平滑过渡。你在「设置 → 自定义代码 → 全局 CSS」里定义好这个变量，所有区块引用 var(--section-padding-x) 就自动获得流体边距，不用写 @media。

流体字号

同样思路套到字号上，正文标题、段落都能“长大缩小”：

--fluid-h1: clamp(1.75rem, calc(1.25rem + 2.5vw), 3rem);
--fluid-body: clamp(1rem, calc(0.95rem + 0.3vw), 1.125rem);

这样 H1 在手机上是 1.75rem，桌面拉到 3rem，中间连续渐变——比写 3 个 @media 断点清爽得多。

为什么比媒体查询更省心

1. 断点不再是“跳变”：媒体查询是在 768px 突然换一套值，流体排版是连续的，过渡更自然。
2. 代码量骤减：一个 clamp() 顶好几个 @media 块。
3. 和设计体系天然契合：把 fluid 变量放进 :root，全站统一调用，改一处全局变。
4. 维护成本低：新增页面自动继承流体规则，不用每个页面单独调响应式。

注意：clamp() 的 vw 计算建议用现成工具（如 Fluid Type Scale 生成器）算出中间系数，避免手算出错。生成的值直接塞进变量即可。

小结

流体排版不是炫技，而是让 Bricks 站点在任意屏幕上都“刚好”的实用手法。clamp() + 设计体系变量，能把响应式从“写一堆媒体查询”简化成“定义几个 fluid 变量”。配合上一篇的 :root 设计体系，你的站点既统一又好维护。

选题参考自 JonnyWP 的《流体排版》教程思路，代码与结构为本站重写整理。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程