# 设计系统技能：流体布局和版式用于构建响应式界面的思维框架。此技能适用于任何堆栈：React、Vue、Astro、Svelte、11ty、纯 HTML、Tailwind、SCSS 或 vanilla CSS。 ** ** ## 第一部分：设计理念 ### 编码前三思在编写任何 CSS 之前，请先提出以下问题： 1. **内容层次结构是什么？** * 最重要的元素是什么？ * 什么是二级、三级？ * 小屏幕上可以隐藏什么？ 2. **这在不同的屏幕尺寸上如何流动？** * 布局是否需要改变？ * 最小可行布局是什么？ * 项目应该堆叠、环绕或水平滚动吗？ 3. **什么是关键的，什么是可有可无的？** * 在移动设备上，什么必须立即可见？ * 通过互动可以揭示什么？ ### 移动并不意味着“集中一切” 常见的误解：移动布局应将所有内容居中。现实： * **左对齐内容** 通常扫描效果更好（自然阅读方向） * **不对称边距**创造视觉趣味和层次结构 * **水平滚动**（卷轴模式）有时胜过堆叠 * **底部导航** 通常比汉堡菜单效果更好 * **标签** 如果限制为 3-5 个项目，则可以在移动设备上使用 ### 询问，不要假设实现布局时： * 询问小屏幕上的优先级是什么 * 询问某些元素是否可以隐藏/折叠 * 询问交互模式（滑动、点击、长按） * 不要发明解决方案——提出选项 ** ** ## 第二部分：流体选项并非一切都需要流畅。根据项目选择：您想要流体值吗？ ├─ 仅排版 → 流畅的字体大小，固定的间距 ├─ 仅间距 → 固定字体、流体间隙/填充 ├─ 两者→全流体系统 └─ 两者都不是 → 基于断点的、明确的大小 ### 何时使用每个方法|最适合 ---|--- **两者皆流体** |营销网站、社论、作品集 **仅限流体类型** |具有密集 UI、数据表的应用程序 **仅限流体空间** |具有固定类型层次结构的应用程序 **修复了两者** |需要精确控制，传统支持 ### 混合方法大多数项目受益于： * 标题的流体排版 * 修复了正文/UI 文本的排版 * 截面和大间隙的流体间距 * 组件内部的固定间距 ** ** ## 第三部分：数学类型 ### 核心公式流体值使用 CSS `clamp()` 和线性插值：字体大小：clamp（最小、首选、最大）；其中**首选**值创建平滑缩放：首选 = (斜率 × 100)vw + 截距斜率 = (最大尺寸 - 最小尺寸) / (最大视口 - 最小视口) 截距 = minSize - (斜率 × minViewport) ### 计算示例鉴于： * 最小字体：320 像素视口时为 16 像素 * 最大字体：1280 像素视口时为 20 像素斜率 = (20 - 16) / (1280 - 320) = 4 / 960 = 0.00417 截距 = 16 - (0.00417 × 320) = 16 - 1.33 = 14.67px 首选 = 0.417vw + 14.67px 结果：字体大小：clamp(1rem, 0.417vw + 0.917rem, 1.25rem); ### 类型比例字体比例将基本尺寸乘以比率的幂：字体大小 = 基本大小 × 比例^步长比率|名称 |性格 ---|---|--- 1.067 | 1.067小二度|很紧，技术性很强 1.125 | 1.125大二 |紧密、紧凑的用户界面 1.200 | 1.200小三度|平衡、多才多艺 1.250 | 1.250大三度|舒适阅读 1.333 | 1.333完美第四 |宽敞，社论 1.414 | 1.414增强第四 |戏剧性的头条新闻 1.500 | 1.500完美五度|非常戏剧化 1.618 | 1.618黄金比例|经典比例 ### 生成步骤基数为 16px，比例为 1.25（大三度）：步骤|计算|尺寸 ---|---|--- -2 | 16 × 1.25^-2 | 16 × 1.25^-2 10.24像素 -1 | 16 × 1.25^-1 | 16 × 1.25^-1 12.80像素 0 | 16 × 1.25^0 | 16 × 1.25^0 16.00像素 1 | 16 × 1.25^1 | 16 × 1.25^1 20.00像素 2 | 16 × 1.25^2 | 16 × 1.25^2 25.00像素 3 | 16 × 1.25^3 | 16 × 1.25^3 31.25像素 4 | 16 × 1.25^4 | 16 × 1.25^4 39.06像素 5 | 16 × 1.25^5 | 16 × 1.25^5 48.83像素 ### 流体类型秤结合移动设备与桌面设备的不同比例：移动版：1.125（大二度）——更严格的等级制度桌面版：1.25（大三度）——更戏剧化的层次结构每个步骤都有一个最小值（移动）和最大值（桌面），然后应用钳位公式。 ** ** ## 第四部分：间距比例 ### 基本比例（T 恤尺码） 3xs → 2xs → xs → sm → md → lg → xl → 2xl → 3xl 使用比率（通常为 1.5 纯五度）生成值：代币|计算（比率1.5）|价值 ---|---|--- 尺寸-3xs |基数 ÷ 1.5^3 | 4.7像素尺寸-2xs |基数 ÷ 1.5^2 | 7.1像素尺寸-xs |基数 ÷ 1.5^1 | 10.7像素尺码-sm |基地| 16像素尺寸-md |基数 × 1.5^1 | 24像素尺寸-lg |基数 × 1.5^2 | 36像素尺寸-XL |基数 × 1.5^3 | 54像素尺寸-2xl |基数 × 1.5^4 | 81像素尺寸-3xl |基数 × 1.5^5 | 121.5像素 ### 1-Up Pairs（一步跳）对于缩放更显着的响应式间距： /* 较小步长的最小值，较大步长的最大值 */ --size-xs-sm: 钳位(/* xs-min */, /* 首选 */, /* sm-max */); --size-sm-md: 钳位(/* sm-min */, /* 首选 */, /* md-max */); --size-md-lg: 钳位(/* md-min */, /* 首选 */, /* lg-max */); --size-lg-xl: 钳位(/* lg-min */, /* 首选 */, /* xl-max */); --size-xl-2xl: 钳位(/* xl-min */, /* 首选 */, /* 2xl-max */); 用于：部分填充、大间隙、英雄间距 ### 二人双人跳（两步跳）为了实现更显着的响应式缩放： /* 跳过一步以获得更大的差异 */ --size-xs-md: 钳位(/* xs-min */, /* 首选 */, /* md-max */); --size-sm-lg: 钳位(/* sm-min */, /* 首选 */, /* lg-max */); --size-md-xl: 钳位(/* md-min */, /* 首选 */, /* xl-max */); --size-lg-2xl: 钳位(/* lg-min */, /* 首选 */, /* 2xl-max */); --size-xl-3xl: 钳位(/* xl-min */, /* 首选 */, /* 3xl-max */); 用于：页边距、主要分节符、英雄内容 ### 语义别名将原始尺寸映射到用途：：根{ --间隙紧：var(--size-xs); --间隙：var(--size-sm); --间隙松散：var(--size-md); --section-padding: var(--size-lg-xl); /* 一对一 */ --页边距：var(--size-md-xl); /* 二对 */ } ** ** ## 第五部分：自适应颜色标记 ### 问题硬编码颜色不适应： /* 这只适用于白色背景 */ .button:悬停{ 背景：rgba(0,0,0,0.08); } ### 解决方案：currentColor + 透明度使用“currentColor”以便令牌继承和适应：：根{ /* 透明度比例 */ --alpha-50：4%； --alpha-100：8%； --alpha-200：12%； --alpha-300：16%； --alpha-400：24%； --alpha-500：32%； --alpha-600：48%； --alpha-700：64%； --alpha-800：80%； --alpha-900：90%； --alpha-1000：97%； } ### 表面令牌：根{ /* 适应任意前景色 */ --surface-hover: 颜色混合（在 srgb 中，currentColor var(--alpha-100), 透明）； --surface-active: 颜色混合（在 srgb 中，currentColor var(--alpha-200), 透明）； --surface-selected：颜色混合（在 srgb 中，currentColor var（--alpha-300），透明）； --surface-disabled：颜色混合（在 srgb 中，currentColor var（--alpha-50），透明）； /* 自适应边界 */ --border-subtle: 颜色混合（在 srgb 中，currentColor var(--alpha-100), 透明）； --border-default: 颜色混合（在 srgb 中，currentColor var(--alpha-200), 透明）； --border-strong：颜色混合（在 srgb 中，currentColor var（--alpha-400），透明）； } ### 用法 .按钮{ 背景：透明；边框：1px 实心 var(--border-default); } .button:悬停{ 背景：var（--表面悬停）； } .按钮：活动{ 背景：var(--表面活性)； } /* 适用于任何背景颜色 */ ### 白色/黑色透明度（固定）当您需要一致的覆盖（无论上下文如何）时：：根{ /* 白色覆盖 */ --white-a100：颜色混合（在 srgb 中，白色 var(--alpha-100)，透明）； --white-a200：颜色混合（在 srgb 中，白色 var(--alpha-200)，透明）； --white-a300：颜色混合（在 srgb 中，白色 var(--alpha-300)，透明）； /* 黑色覆盖 */ --black-a100：颜色混合（在 srgb 中，黑色 var(--alpha-100)，透明）； --black-a200：颜色混合（在 srgb 中，黑色 var(--alpha-200)，透明）； --black-a300：颜色混合（在 srgb 中，黑色 var(--alpha-300)，透明）； } ** ** ## 第六部分：硬性规则这些都是不可协商的默认值。仅在有明确理由的情况下打破它们。 ### 1\. 1:1 容器中的图标（始终） .图标{ 显示：网格；地点项目：中心；纵横比：1；宽度：var(--图标大小，1.5rem)； } /* 或内联 */ .图标{ 显示：内联柔性；对齐项目：居中；调整内容：居中；纵横比：1；宽度：1em；高度：1em； } **为什么：** 图标不在方形容器中时会错位。 1:1 的比例可确保与文本和其他元素保持一致的对齐方式。 ### 2\.逻辑属性（始终） /* 是 */ .元素{ 填充块：var(--size-md); 内联填充：var(--size-lg); 边距块开始：var(--size-sm); 内联边框结束：1px 实心 var(--border-default); } /* 否 */ .元素{ 顶部填充：var(--size-md); 填充底部：var(--size-md); 左填充：var(--size-lg); 右填充：var(--size-lg); } **为什么：** 逻辑属性自动支持 RTL 语言和书写模式。 ### 3\.容器上的差距，而不是儿童的利润 /* 是 */ .stack { 显示：柔性；弹性方向：列；间隙：var(--size-sm); } /* 否 */ .stack > * + * { 顶部边距：1rem； } **为什么：** Gap 更易于维护，不需要脑白质切除的猫头鹰选择器，并且可以与 flex/grid 一起使用。 ### 4\.无硬编码值 /* 是 */ .卡{ 填充：var(--size-md); 边界半径：var(--radius-md); 间隙：var(--size-sm); } /* 否 */ .卡{ 内边距：24px；边框半径：8px；间隙：16px； } **为什么：** 代币可以创造一致性并使全局更改变得微不足道。 ### 5\.在每个包装器上显示 Grid 或 Flex 每个包含多个子容器的容器都应该声明布局： /* 是 */ .卡{ 显示：网格；间隙：var(--size-sm); } /* NO - 隐式块布局 */ .卡{ /* 子级使用默认块流 */ } **为什么：** 明确的布局可以防止出现意外并让间隙发挥作用。 ** ** ## 第七部分：布局模式 ### 决策树：Grid 与 Flex 需要明确的 2D 控制（行和列）？ ├─ 是 → 网格 └─ 否 → 需要包装物品吗？ ├─ 是 → 带有柔性包裹的柔性 └─ 否 → 单轴对中？ ├─ 是 → 弹性 └─ 否 → 需要堆叠/覆盖吗？ ├─ YES → 网格（网格区域技巧） └─ 否 → 默认为 Flex ### 网格：模板区域（显式布局）对于复杂的命名布局： .page { 显示：网格；网格模板区域： “标题标题标题” “导航主要放在一边” “页脚页脚页脚”；网格模板列：200px 1fr 250px；网格模板行：自动 1fr 自动；最小高度：100vh； } .header { 网格区域：标题； } .nav { 网格区域：nav; } .main { 网格区域：主； } .aside { 网格区域：aside; } .footer { 网格区域：页脚； } /* 移动设备：堆叠所有内容 */ @media（最大宽度：768px）{ .page { 网格模板区域： “标题” “主要” “一边” “导航” “页脚”；网格模板列：1fr； } } ### 网格：模板列/行（结构化）对于重复但受控的布局： /* 固定列 */ .grid-3 { 显示：网格；网格模板列：重复（3，1fr）；间隙：var(--size-md); } /* 混合固定和灵活 */ .sidebar-layout { 显示：网格；网格模板列：250px 1fr；间隙：var(--size-lg); } /* 响应显式断点 */ .grid-responsive { 显示：网格；网格模板列：1fr；间隙：var(--size-md); } @media（最小宽度：640px）{ .grid-responsive { 网格模板列：重复（2，1fr）； } } @media（最小宽度：1024px）{ .grid-responsive { 网格模板列：重复（3，1fr）； } } ### 网格：自动调整/自动填充（固有）对于能够自行解决的网格： /* 自动调整：列空时折叠 */ .网格自动调整{ 显示：网格；网格模板列：重复（自动调整，minmax（min（18rem，100％），1fr））；间隙：var(--size-md); } /* 自动填充：保留空列轨道 */ .grid-自动填充{ 显示：网格；网格模板列：重复（自动填充，minmax（min（18rem，100％），1fr））；间隙：var(--size-md); } **何时使用：** * `auto-fit`：卡片网格、画廊，当您希望项目拉伸时 * `自动填充`：当您想要一致的列宽时，即使项目很少 ### 网格：堆叠（覆盖）将“位置：绝对”替换为覆盖： .stack-container { 显示：网格；网格模板区域：“堆栈”； } .stack-container > * { 网格区域：堆栈； } /* 对齐子元素的位置 */ .stack-container > .overlay { 自我对齐：结束；自我辩护：开始；填充：var(--size-md); } ### Flex：堆栈（垂直） .stack { 显示：柔性；弹性方向：列；间隙：var(--size-sm); } /* 变体 */ .stack[data-gap="tight"] { 间隙：var(--size-xs); } .stack[data-gap="loose"] { 间隙：var(--size-lg); } .stack[data-align="center"] { 对齐项目：中心； } .stack[data-align="end"] { 对齐项目：flex-end; } ### Flex：集群（水平包裹） .簇{ 显示：柔性；弹性包裹：包裹；间隙：var(--size-xs); 对齐项目：居中； } /* 变体 */ .cluster[data-justify=“ Between”] { justify-content：空间之间； } .cluster[data-justify="end"] { justify-content: flex-end; 复制代码} ### Flex：切换器（响应行/列） .切换器{ 显示：柔性；弹性包裹：包裹；间隙：var(--size-md); } .switcher > * { 弹性增长：1；弹性基础： calc((30rem - 100%) * 999); } **工作原理：** 当容器宽度超过 30rem 时，物品会保持在一行。在此之下，它们堆叠起来。 ### Flex：侧边栏 .with-sidebar { 显示：柔性；弹性包裹：包裹；间隙：var(--size-lg); } .with-sidebar > :first-child { 弹性基础：250px；弹性增长：1； } .with-sidebar > :last-child { 弹性基础：0；弹性增长：999；最小宽度：60%； } ### 卷轴（水平滚动） .卷轴{ 显示：柔性；间隙：var(--size-sm); 溢出-x：自动；滚动捕捉类型：x 强制；滚动填充内联：var(--size-md); 填充块：var(--size-xs); /* 对焦环的空间 */ } .卷轴 > * { 弹性收缩：0；滚动对齐：开始； } /* 隐藏滚动条但保留功能 */ .卷轴{ 滚动条宽度：无； } .reel::-webkit-滚动条 { 显示：无； } ** ** ## 第八部分：容器查询当组件应该响应其容器而不是视口时： .card-container { 容器类型：内联大小；容器名称：卡； } .卡{ 显示：网格；间隙：var(--size-sm); } @容器卡（最小宽度：400px）{ .卡{ 网格模板列：150px 1fr；间隙：var(--size-md); } } @容器卡（最小宽度：600px）{ .卡{ 网格模板列：200px 1fr； } } ### 何时使用容器查询与视口查询使用容器查询 |使用视口查询 ---|--- 不同背景下的卡片 |页面级布局可重复使用的组件|导航更改侧边栏内容 |全局版式小部件/嵌入 |部分布局 ** ** ## 第九部分：SCSS 实施 ### 核心功能 // 将 px 转换为 rem @函数 rem($px) { @return calc($px / 16 * 1rem); } // 生成流体钳值 @function Fluid-Clamp($min-px, $max-px, $min-vw: 320, $max-vw: 1280) { $min-rem: rem($min-px); $max-rem: rem($max-px); $斜率：计算(($max-px - $min-px) / ($max-vw - $min-vw)); $截距：$min-px - ($slope * $min-vw); $slope-vw: calc($slope * 100); $intercept-rem: rem($intercept); @return Clip(#{$min-rem}, #{$slope-vw}vw + #{$intercept-rem}, #{$max-rem}); } // 计算类型步长 @function type-step($step, $base: 16, $ratio: 1.25) { @return $base * pow($ratio, $step); } // 生成流体类型步骤 @function Fluid-type-step($step, $min-base: 16, $max-base: 16, $min-ratio: 1.125, $max-ratio: 1.25, $min-vw: 320, $max-vw: 1280) { $min-size: type-step($step, $min-base, $min-ratio); $max-size: type-step($step, $max-base, $max-ratio); @return Fluid-Clamp($min-size, $max-size, $min-vw, $max-vw); } // 计算间距步长 @function space-step($step, $base: 16, $ratio: 1.5) { @return $base * pow($ratio, $step); } // 生成流体空间步骤 @function Fluid-Space-step($step, $base: 16, $ratio: 1.5, $min-vw: 320, $max-vw: 1280) { $min-size: 空间步长($step, $base, $ratio) * 0.75; // 75% 在移动设备上 $max-size: 空间步长($step, $base, $ratio); @return Fluid-Clamp($min-size, $max-size, $min-vw, $max-vw); } // Pow 函数（对于较旧的 Sass 版本） @function pow($base, $exp) { $结果：1； @if $exp > 0 { @for $i 从 1 到 $exp { $结果：$结果* $基数； } } @else 如果 $exp < 0 { @for $i 从 1 到 (-$exp) { $结果：计算（$结果/$基础）； } } @return $结果； } ### 生成令牌：根{ // 输入比例 @for $i 从 -2 到 5 { --font-#{$i}: #{流体类型步骤($i)}; } // 间距比例 $空间名称: ('3xs': -3, '2xs': -2, 'xs': -1, 'sm': 0, 'md': 1, 'lg': 2, 'xl': 3, '2xl': 4, '3xl': 5); @each $name, $step in $space-names { --size-#{$name}: #{流体空间步($step)}; } // 1-up 对 --size-xs-sm: #{fluid-clamp(空间步长(-1) * 0.75, 空间步长(0))}; --size-sm-md: #{fluid-clamp(空间步长(0) * 0.75, 空间步长(1))}; --size-md-lg: #{fluid-clamp(空间步长(1) * 0.75, 空间步长(2))}; --size-lg-xl: #{fluid-clamp(空间步长(2) * 0.75, 空间步长(3))}; --size-xl-2xl: #{fluid-clamp(空间步长(3) * 0.75, 空间步长(4))}; // 2对 --size-xs-md: #{fluid-clamp(空间步长(-1) * 0.75, 空间步长(1))}; --size-sm-lg: #{fluid-clamp(空间步长(0) * 0.75, 空间步长(2))}; --size-md-xl: #{fluid-clamp(空间步长(1) * 0.75, 空间步长(3))}; --size-lg-2xl: #{fluid-clamp(空间步长(2) * 0.75, 空间步长(4))}; --size-xl-3xl: #{fluid-clamp(空间步长(3) * 0.75, 空间步长(5))}; } ** ** ## 第十部分：Tailwind 实施 ### Tailwind v4 @主题配置 @导入“tailwindcss”；：根{ /* 流体间距 - 定义原始值 */ --size-3xs: 钳位(0.25rem, 0.23rem + 0.1vw, 0.31rem); --size-2xs: 钳位(0.5rem, 0.46rem + 0.2vw, 0.63rem); --size-xs: 钳位(0.75rem, 0.68rem + 0.3vw, 0.94rem); --size-sm: 钳位(1rem, 0.91rem + 0.4vw, 1.25rem); --size-md: 钳位(1.5rem, 1.37rem + 0.6vw, 1.88rem); --size-lg: 钳位(2rem, 1.83rem + 0.8vw, 2.5rem); --size-xl: 钳位(3rem, 2.74rem + 1.2vw, 3.75rem); --size-2xl: 夹子(4rem, 3.65rem + 1.6vw, 5rem); --size-3xl: 夹子(6rem, 5.48rem + 2.4vw, 7.5rem); /* 1-up 对 */ --size-sm-md: 钳位(1rem, 0.8rem + 1vw, 1.88rem); --size-md-lg: 钳位(1.5rem, 1.2rem + 1.5vw, 2.5rem); --size-lg-xl: 钳位(2rem, 1.5rem + 2.5vw, 3.75rem); /* 2-up 对 */ --size-sm-lg: 钳位(1rem, 0.6rem + 2vw, 2.5rem); --size-md-xl: 钳位(1.5rem, 0.9rem + 3vw, 3.75rem); /* 流体类型 */ --font-xs: 夹子(0.75rem, 0.7rem + 0.2vw, 0.875rem); --font-sm: 夹子(0.875rem, 0.8rem + 0.3vw, 1rem); --font-base: 夹子(1rem, 0.9rem + 0.4vw, 1.125rem); --font-lg: 夹子(1.125rem, 1rem + 0.5vw, 1.25rem); --font-xl: 夹子(1.25rem, 1.1rem + 0.7vw, 1.5rem); --font-2xl: 夹子(1.5rem, 1.3rem + 1vw, 2rem); --font-3xl: 夹子(1.875rem, 1.5rem + 1.5vw, 2.5rem); --font-4xl: 夹子(2.25rem, 1.8rem + 2vw, 3rem); --font-5xl: 夹子(3rem, 2.2rem + 3vw, 4rem); /* 自适应颜色 */ --surface-hover: 颜色混合(srgb, currentColor 8%, 透明); --surface-active: 颜色混合(srgb, currentColor 12%, 透明); --surface-selected: 颜色混合(srgb, currentColor 16%, 透明); --border-subtle: 颜色混合（srgb 格式，currentColor 8%，透明）； --border-default: 颜色混合（srgb 中，当前颜色 16%，透明）； } @主题{ /* 映射到 Tailwind 实用程序 */ --spacing-3xs: var(--size-3xs); --spacing-2xs: var(--size-2xs); --spacing-xs: var(--size-xs); --spacing-sm: var(--size-sm); --spacing-md: var(--size-md); --spacing-lg: var(--size-lg); --spacing-xl: var(--size-xl); --spacing-2xl: var(--size-2xl); --spacing-3xl: var(--size-3xl); /* 对 */ --spacing-sm-md: var(--size-sm-md); --spacing-md-lg: var(--size-md-lg); --spacing-lg-xl: var(--size-lg-xl); --spacing-sm-lg: var(--size-sm-lg); --spacing-md-xl: var(--size-md-xl); /* 字体大小 */ --字体大小-xs: var(--字体-xs); --字体大小-sm: var(--font-sm); --字体大小基础：var(--字体基础); --字体大小-lg: var(--字体-lg); --font-size-xl: var(--font-xl); --font-size-2xl: var(--font-2xl); --font-size-3xl: var(--font-3xl); --font-size-4xl: var(--font-4xl); --font-size-5xl: var(--font-5xl); /* 颜色 */ --颜色表面悬停：var(--表面悬停); --颜色表面活性：var(--表面活性); --颜色表面选择：var(--表面选择); --颜色边框-微妙：var（--边框-微妙）； --颜色边框默认值：var(--边框默认值); } ### 用法示例

标题

内容

Flex 网格流

包含技能