CSS 技巧

现代 CSS 布局:Grid 与 Flex 的组合

内容详情介绍

什么时候用 Grid,什么时候用 Flex。

容易踩的坑

如果你也在做类似的探索,欢迎在评论区交流。我会把后续的补充整理到同一篇文章里。

做界面设计的时候,最容易忽略的往往不是风格,而是细节之间的一致性。一个按钮的阴影方向、一处卡片的内边距、一段文字的呼吸节奏,用户说不出来,但感觉得到。

  • 这篇文章不打算讲太多理论,主要把我最近在项目里踩过的坑和对应的解法整理出来,方便自己回顾,也希望对你有用。
  • 第一件事是先把变量抽出来。颜色、圆角、阴影、间距,全部用统一的命名规则管理,后面无论换主题还是做深色模式,改动都只在一个地方。

先说结论

第二件事是控制层次。一个页面里真正需要突出的元素通常不超过三个,其余的都应该退到背景里去,用更低的对比度和更少的装饰。

第三件事是留白。很多人以为留白是「没东西可放」,其实留白是主动的设计决策,它决定了内容的读取顺序和节奏。

最后,建议在真实设备上多验证几次。设计稿上的完美效果,到了小屏、弱光或者高亮环境下,往往需要重新微调。

0 条回应