【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址https://gitcode.com/gh_mirrors/fr/Front-End-Checklist点击查看免费下载导读本文以 Front-End-Checklist 仓库中的responsive-units规则为核心系统讲解为什么现代 Web 布局应优先使用相对单位rem、em、%、vw、vh、ch、clamp()而不是固定px值并给出可直接复用的代码范式、单位选型表、验证清单以及该规则在仓库源码如 apps/web/app/globals.css中的真实落地方式。读完本文你将能够独立完成一次「像素单位审计」把固定字体、固定宽度、固定内边距改造成随用户浏览器字号偏好与视口尺寸自然伸缩的响应式布局。规则概述让布局跟随用户与容器而不是反过来该规则在仓库中有两处权威定义内容完全一致Skill 入口skills/responsive-units/SKILL.md面向人类开发者与 AI Agent提供了 Check / Fix / Explain / Code Review 四类提示词完整参考skills/responsive-units/references/rule.md 与规则库 packages/content/rules/en/css/responsive-units.mdx包含全部代码示例与验证步骤。规则核心主张只有一句话用rem、em、%、vw、vh和clamp()代替固定的px值构建能随用户字号偏好与视口尺寸缩放的布局。在规则元数据中它被标记为priority: high高优先级、difficulty: beginner适合初学者、estimatedTime: 20约 20 分钟归类为css大类下的responsive子类。规则的 TL;DR 给出了四条可以直接照做的结论字号用rem—— 尊重用户的浏览器字号偏好宽度用%或 flex/grid —— 自动适配父容器组件内间距padding、border-radius用em—— 相对组件自身字号伸缩用clamp()做流式排版 —— 在断点之间平滑缩放减少断点数量。为什么像素单位会成为无障碍障碍固定像素值会覆盖用户的浏览器偏好。对于低视力用户而言在浏览器设置中调大默认字号或使用系统级放大是最常见的辅助手段之一一旦页面用px写死字号这个偏好就会被完全忽略。这就是该规则whyItMatters的核心论点见 packages/content/rules/en/css/responsive-units.mdx。相对单位带来的第二个收益是减少断点数量元素会根据可用空间自然适应而不是在每一个视口宽度下都写一个显式覆盖。这在仓库的关联规则中也有印证——packages/content/rules/en/css/horizontal-scroll.mdx 指出低视力用户常把浏览器放大到 200%–400%等效于把 1280px 宽的页面压缩成 320px 宽的视口此时固定宽度元素必然溢出、产生横向滚动条而相对单位布局恰好能随缩放自然重排。基础代码示例从 px 到 rem以下代码来自 skills/responsive-units/references/rule.md是规则讲解的第一段完整示例。前提是浏览器默认字号为 16px/* Assume browser default is 16px */ html { font-size: 100%; } /* Dont fix the root — let it inherit from browser */ /* ❌ Bad: px overrides users browser preference */ body { font-size: 16px; } h1 { font-size: 32px; } /* ✅ Good: rem scales with browser preference */ body { font-size: 1rem; } /* browser default */ .text-sm { font-size: 0.875rem; } /* 14px at 16px base */ .text-lg { font-size: 1.125rem; } /* 18px at 16px base */ h1 { font-size: 2rem; } /* 32px at 16px base */两个关键点html { font-size: 100% }而不是写死16px根元素的字号应该继承浏览器默认值这样用户修改浏览器设置时整棵 rem 字号树都会跟随缩放rem是相对根元素html字号的单位换算公式为px ÷ 16 rem例如14px → 0.875rem、18px → 1.125rem、32px → 2rem。仓库的关联规则 packages/content/rules/en/css/font-size.mdx 还专门提醒了一个常见陷阱不要用html { font-size: 10px }这种「10px 基准」重置技巧它虽然让 rem 算术好算却会破坏无障碍——用户在浏览器里设置的 20px 会被当成 10px 处理。建议改用html { font-size: 62.5% }或干脆不做重置直接基于真实的 16px 基准计算 rem。单位选型表每种相对单位该用在哪规则提供了一张完整的单位参考表packages/content/rules/en/css/responsive-units.mdx单位相对什么最适合用在rem根元素字号html字号、全局一致的间距em父元素字号组件作用域内的间距%父元素尺寸flex/grid 中的宽度、高度vw视口宽度通栏full-bleed区块、流式宽度vh视口高度Hero 区块、弹窗ch字符 0 的宽度输入框宽度、文本容器clamp()由视口计算的区间流式排版fluid typography选择单位的本质是回答一个问题这个值应该相对谁变化想让字号跟随浏览器偏好就相对根字号rem想让间距跟随组件自身的字号就相对父元素字号em想让宽度跟随父容器就相对父容器%想让区块跟随视口就用vw/vh。流式排版用 clamp() 让字号在断点之间平滑插值clamp(MIN, VAL, MAX)接收一个最小值、一个首选计算值和最大值浏览器会在视口变化时在区间内平滑插值从而让「为每个断点写一个字号」成为过去式/* Font size that scales between 16px and 24px as viewport grows from 320px to 1280px */ h1 { font-size: clamp(1rem, 2.5vw 0.5rem, 1.5rem); } /* No breakpoints needed — size smoothly interpolates */这个模式在仓库自身的 Web 应用中有非常完整的落地。在 apps/web/app/globals.css 中项目用theme inline定义了一套「流式字号刻度」xs、sm这类微 UI 字号保持固定0.75rem、0.875rem而阅读与展示类字号base到8xl全部使用clamp()--text-base: clamp(0.875rem, 0.8rem 0.25vw, 1rem); --text-lg: clamp(1rem, 0.95rem 0.35vw, 1.125rem); --text-2xl: clamp(1.25rem, 1.1rem 0.75vw, 1.5rem); --text-4xl: clamp(1.875rem, 1.5rem 1.875vw, 2.25rem); --text-8xl: clamp(4.5rem, 3.5rem 5vw, 6rem);注意--text-2xl这条1.25rem 0.75vw的首选值意味着在 320px 视口约等于 1.25rem、在更大视口随vw平滑增长但被min/max夹在1.25rem与1.5rem之间——这正是规则所倡导的「不需要断点、平滑插值」的工程化范本。每个刻度还配套了--line-height变量例如--text-base--line-height: 1.6保证流式字号下阅读行距依然稳定。组件内间距用 em 让内边距跟随组件字号em相对父元素或元素自身的字号适合用来定义组件内部的间距。它的精妙之处在于当组件字号变化时内边距会等比缩放无需额外覆盖/* Button padding relative to the buttons own font size */ .button { font-size: 1rem; padding: 0.5em 1em; /* 8px 16px at 1rem */ } .button--large { font-size: 1.25rem; /* padding auto-scales: 10px 20px — same proportions */ }这里的.button--large只改了font-sizepadding就自动从8px 16px缩放到10px 20px比例保持不变——这就是「组件作用域内间距」的含义也是规则中em条目「Best for: Component-scoped spacing」的直观演示。响应式容器%、min()/max() 与视口单位规则的第三组示例解决容器与区块的宽度问题见 skills/responsive-units/references/rule.md/* ✅ Percentage-based widths */ .container { width: 90%; max-width: 1200px; margin-inline: auto; } /* ✅ min/max for sensible constraints */ .card { width: min(100%, 400px); /* never wider than parent or 400px */ min-height: max(200px, 30vh); } /* ✅ Full viewport sections */ .hero { min-height: 100svh; /* svh small viewport height, safer than vh on mobile */ }三个要点width: 90%max-width: 1200pxmargin-inline: auto是经典的「流动 封顶 居中」容器配方小屏跟随父容器、大屏不超过阅读上限min()/max()是clamp()的兄弟函数width: min(100%, 400px)表示「取父容器宽度与 400px 中较小的一个」避免卡片在窄容器中溢出移动端优先用svh而不是vhsvhsmall viewport height代表移动端浏览器工具栏展开时的「小视口高度」比vh更安全避免 Hero 区块底部被地址栏遮挡。这也是%与vw/vh各自适用场景的完整对比。px 也有用武之地什么时候保留像素规则明确指出相对单位不是「全面禁止 px」。以下场景中固定像素值是合理的/* Fixed-size UI chrome that should NOT scale: borders, box-shadows, 1px lines */ .divider { border-top: 1px solid var(--color-border); } .avatar { width: 40px; height: 40px; } /* Fixed icon sizes */判断标准很清晰边框、阴影、1px 分隔线、固定尺寸的图标/头像等「UI 装饰」不应该随用户字号偏好缩放——它们不承载可读性语义。而凡是承载文本可读性与布局流动性的属性font-size、width、padding都应优先使用相对单位。规则的关联规则 packages/content/rules/en/css/font-size.mdx 给出的字号下限也可以作为补充约束正文至少1rem16px、小字/注释至少0.75rem12pxiOS Safari 会强制放大小于 12px 的文字并引发布局抖动、表单输入框1rem防止 iOS 聚焦时自动放大。在断点与容器之间取舍media query、container query 与相对单位该规则属于css/responsive子类与另外三条规则共同构成仓库的「响应式」审查组见 packages/content/rules/en/css/responsive-units.mdx 的relatedRulesfont-size字号用 px 会覆盖无障碍设置应改用 remviewport-zoom禁用视口缩放的页面同样会破坏相对单位布局对需要缩放用户的支持horizontal-scroll固定宽度、width: 100vw、不可断词的长字符串都会导致横向滚动修复方式正是流体布局单位 max-width: 100%overflow-wrap: break-wordcontainer-queries与相对单位共同解决「组件在不同布局上下文中如何自适应」的问题——容器查询让组件响应父容器的尺寸container-type: inline-sizecontainer相对单位则让数值随字体与空间基准伸缩二者常在同一轮审查中一起评估。一个实用的取舍思路media query 处理页面级布局container query 处理组件级布局而相对单位尤其是rem与clamp()则把断点内的微观调整降到最低——这正是规则开头「减少断点数量」论断的完整实践形态。四步验证清单修改后如何确认生效规则为人类审查者和 AI Agent 提供了统一的验证流程见 packages/content/rules/en/css/responsive-units.mdx 与 skills/responsive-units/references/rule.md在受规则影响的断点与交互状态下检查渲染后的 UI在 DevTools 中确认计算后的样式computed styles与预期修复一致发布前至少在一个移动端视口和一个桌面端视口下测试如果规则改动涉及动效motion、对比度contrast或布局稳定性layout stability直接验证这些用户可见的最终结果。与之配套的是 SKILL 文件中的四类提示词skills/responsive-units/SKILL.md可直接交给 AI Agent 执行Check找出该 CSS 文件中所有应改用相对单位的 px 型font-size、width和padding值Fix把固定 px 字号换算为 rem把固定宽度替换为百分比或相对方案Explain解释rem、em、%、vw、vh之间的区别及各自适用场景Code Review审查样式表、组件样式与响应式状态在渲染后的 UI 中标记违反规则的具体选择器、声明或断点。实践对照把规则套用到自己的项目结合本文与仓库证据可以总结出一套可迁移的改造流程审计全局搜索font-size: Npx、width: Npx、padding: Npx逐条判断是否承载文本可读性或布局流动性换算字体按px ÷ 16 rem换算如14px → 0.875rem保持根元素html { font-size: 100% }不动重组容器宽度改为width: %max-width组件内间距改为em标题字号改为clamp(min, preferred, max)验证在浏览器设置中把默认字号调大如 20px再浏览页面确认正文与标题同步缩放再分别在 320px 与桌面视口下检查是否出现横向滚动可参考 horizontal-scroll 的排查清单。总结responsive-units规则的全部要点可以浓缩为一句话为每个数值问一句「它应该相对什么变化」然后用对应的相对单位表达出来——字号相对根字号rem、组件内间距相对组件字号em、宽度相对父容器%、通栏区块相对视口vw/vh、流式排版交给clamp()而边框、阴影等装饰性 UI 保留px。这套做法既是对低视力用户浏览器偏好的尊重也是减少断点、让布局自然流动的工程手段。仓库自身的 apps/web/app/globals.css 已经用一套完整的clamp()流式字号刻度给出了最佳实践示范可直接对照迁移到自己的项目。赞分享【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址https://gitcode.com/gh_mirrors/fr/Front-End-Checklist点击查看免费下载相关推荐Lynx 响应式布局实战指南rem vw 自动缩放、视口单位与 JavaScript 断点策略Lynx 响应式布局实战指南rem vw 自动缩放、视口单位与 JavaScript 断点策略 在 Lynx 中构建跨设备适配的响应式页面不能照搬 We跨平台移动开发前端桌面应用Lynx CSS 值与单位体系全解rpx 响应式像素、rem/vw 缩放与 calc() 支持边界Lynx CSS 值与单位体系全解rpx 响应式像素、rem/vw 缩放与 calc 支持边界 本文基于 Lynx 官方技能文档 values and uni跨平台移动开发前端桌面应用FlowType.JS与CSS单位对比px、em、rem、vw的应用场景FlowType.JS与CSS单位对比px、em、rem、vw的应用场景 在响应式网页设计中字体大小的适配一直是个挑战。FlowType.JS 是一个创新的前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考