尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

响应式配置上线前:统一 viewport、断点和设计 Token

响应式配置上线前:统一 viewport、断点和设计 Token 响应式配置上线前统一 viewport、断点和设计 Token响应式配置散在 viewport、根字号、断点和组件样式里合并时很难判断影响范围。把全局约定集中管理组件只消费 Token 和容器空间。先列出唯一来源页面级 viewport 配置应在应用入口维护设计 Token 和断点应由同一份配置生成组件只引用变量不在业务样式里另起一套数值。提交前用搜索和静态检查找出重复声明。export const layout { contentMax: 72rem, pageGutter: clamp(16px, 4vw, 48px), } as const;.page { padding-inline: var(--page-gutter); max-width: var(--content-max); }规则放在对的位置全局规则只处理视口和基础排版卡片、工具栏等复用单元优先用容器查询。不要通过修改initial-scale修正单个组件它属于设备视口的基础约定。上线前检查对关键页面跑几组尺寸截图查看系统字号放大和安全区。配置变更进入评审时说明它影响的是全局还是组件范围越小回归成本越可控。
返回列表