"CSS 响应式函数：clamp/min/max 的布局实践"

概述`clamp(min, preferred, max)` 在设定上下限的同时提供一个随视口或容器变化的首选值；`min/max` 用于多个值之间的最小/最大选择。常用于字体大小、间距与组件尺寸的流式控制。示例/* 流式排版：在 16px–24px 之间随视口缩放 */ .title { font-size: clamp(16px, 2vw + 1rem, 24px) } /* 组件宽度：下限 280px，上限容器 90% */ .card { width: clamp(280px, 90cqw, 640px) } /* 间距：最小 8px，最大 24px */ .space { margin: min(24px, 5vw) } 工程建议与容器查询协作：使用容器单位（`cqw/ch/chv` 等）在组件级做响应；减少全局媒体查询。可读性优先：为正文与标题设置合理上下限；避免极端放大/缩小。兼容与性能：特性检测与级联层控制；避免计算过于复杂导致渲染抖动。参考与验证MDN CSS `clamp/min/max` 文档：https://developer.mozilla.org/docs/Web/CSS/clampweb.dev 响应式字体指南：https://web.dev/articles/fluid-typographyChrome 容器单位文档：https://developer.chrome.com/docs/web-platform/container-queries/