稳定比炫技重要

很多 UI 问题来自尺寸没有提前约定。按钮、卡片、网格和图片区域都需要稳定的约束。

小规则

  • 固定比例内容用 aspect-ratio
  • 列表卡片用 minmax(0, 1fr)
  • 文本容器处理 overflow-wrap
  • 工具栏按钮不要随文字变化尺寸
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

结尾

少一点临时补丁，多一点布局契约。