响应式布局先从一个页面状态开始做先挑一个会被反复使用的卡片或表单不要一上来改全站断点。它要描述清楚容器变窄时内容怎样重排长文案怎样处理操作区何时换行。组件受父容器影响时可以用容器查询页面级导航仍可用媒体查询。两者各管各的边界避免断点互相覆盖。.panel { container-type: inline-size; } container (max-width: 36rem) { .actions { flex-wrap: wrap; } }第一版同时补上窄屏、长文本和空状态用例。布局规则来自这些具体条件后面再加自动检查或辅助生成才有可依照的约束。 响应式布局，先从一个页面状态开始做
响应式布局先从一个页面状态开始做先挑一个会被反复使用的卡片或表单不要一上来改全站断点。它要描述清楚容器变窄时内容怎样重排长文案怎样处理操作区何时换行。组件受父容器影响时可以用容器查询页面级导航仍可用媒体查询。两者各管各的边界避免断点互相覆盖。.panel { container-type: inline-size; } container (max-width: 36rem) { .actions { flex-wrap: wrap; } }第一版同时补上窄屏、长文本和空状态用例。布局规则来自这些具体条件后面再加自动检查或辅助生成才有可依照的约束。 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
