CSS DEVELOPMENT LAB · 18

Fluid Responsive Design

响应式不一定等于“手机一套、平板一套、桌面一套”。 很多尺寸可以在一个合理范围内连续变化，让页面从小屏到大屏更自然。

查看实验 核心规则

CORE DEMO

让尺寸在区间内自然变化

下面的标题、间距、卡片内边距、按钮尺寸和内容宽度都不是靠多个断点硬切换， 而是通过流体表达式在最小值和最大值之间连续变化。

01

流体字号

这个标题会随着视口变化，但不会无限变大或变小。

font-size: clamp(1.5rem, 4vw, 3.5rem)
02

流体间距

Padding 会自然变化
padding: clamp(1rem, 4vw, 3rem)
03

内容最大宽度

小屏几乎铺满，大屏不会无限拉宽
width: min(100%, 720px)
04

最小尺寸保护

按钮不会比可点击尺寸更小
min-height: max(44px, 3vw)

FLUID SCALE

页面不是突然“跳变”，而是连续缩放

传统响应式经常在 768px、1024px 等节点突然改变字号和间距。 流体设计则让这些数值在两个边界之间平滑变化。

Small
Medium
Large

THREE FUNCTIONS

clamp / min / max

三个函数解决的是不同问题：限制区间、选择更小值、选择更大值。 理清这三个函数后，很多响应式尺寸都可以写得更简洁。

clamp()

限制在一个区间

clamp(
  最小值,
  理想值,
  最大值
)

最适合字号、间距、模块尺寸等连续变化。

min()

选择更小的值

width:
  min(100%, 1200px);

最适合“不能超过最大宽度，但小屏要自动缩小”。

max()

选择更大的值

min-height:
  max(44px, 3vw);

最适合确保点击区域、间距等不低于可用下限。

REAL WORLD

真实页面中的组合写法

:root {
  --space-section:
    clamp(4rem, 9vw, 8rem);

  --space-card:
    clamp(1.25rem, 3vw, 2.25rem);

  --title-xl:
    clamp(2.5rem, 7vw, 6rem);
}

.page-wrap {
  width:
    min(calc(100% - 2rem), 1200px);
}

NOT ZERO MEDIA QUERIES

流体设计不是消灭 Media Query

连续变化适合“尺寸”，但布局结构发生变化时仍然应该使用 Media Query。 例如两栏变一栏、桌面菜单变手机菜单，这属于布局模式切换。

字号 / 间距 / 宽度 优先考虑 clamp / min / max
两栏 → 一栏 Media Query 更合适
组件内部自适应 可结合 Container Query