什么是“响应式”
响应式 = responsive
i.e. 不论视窗大小如何变化，页面都可以正常且尽可能美观地呈现
→ “正常”：在每一个断点处，该有的组件全都有
→ “美观”：呈现符合人的习惯和直觉
那说到响应式界面，我们会想到什么？
→ 媒体查询 (最常用的CSS手段)
→ 使用相对值而非绝对值
→ min-width & max-width
→ 渐进式的开发方式
但这样散乱的知识在开发时需要串起来。
以下均用 Chakra UI 举例。
当接到“响应式”的需求时，关注什么？
错误的开发方式：
❌ 自测设断点：自己变换视窗大小随意设置页面布局变换的临界值(还自以为很顺滑233)
❌ 对组件之间的遮挡“视而不见”：意识不到页面的布局缺陷
❌ 没有事先仔细了解所使用的组件库：对工具不熟悉
❌ 简单的样式复杂化：CSS基本功不足
切入点：断点(breakpoint)
断点 i.e. 临界点
当使用某一UI组件库时，一般都内置断点，先明确默认断点的值是多少，再确认该断点是否满足需求
⚠️ 断点针对的是整个视窗大小，而不是某个具体组件
✅ 根据断点设置不同情况下的样式
✅ 自测时根据断点看效果
❌ 随意取值
例如当用户不在theme.ts中自定义时，Chakra UI的默认断点可见该doc
明确工具：组件库中是否已内置响应式工具
-
是否有响应式样式的书写例子？
if YES，仔细慢慢阅读并模仿例子的写法 -
是否存在除了styles之外的工具可用？
e.g. hooks
例如在 Chakra UI 中的useBreakpointValue()可以帮助根据断点值设置具体样式
思考视图：呈现是否符合基本逻辑
❌ 在不同的视窗下把页面中的内容都呈现出来就好了
✅ 注意观察布局变化更好的方式
✅ 注意当组件位置改变时，是否仍满足组件间原有的归属关系
已知：导航栏布局 = 横向布局 = 面包屑路径 + 子页面标题 + 菜单按钮
例1：在窄屏时，三个组件都能原布局放下但有点拥挤
→ better：直接改为竖向布局，叠着放
例2：叠着放之后，导航栏按钮自然排在了最后，即插在子页面标题和子页面之间
→ better：调整布局，将菜单按钮放在面包屑路径之下，让子页面标题和子页面在一起
例3：当视窗收窄时，给子页面内部添加了 overflow: auto ，出现滚动条
→ better：直接给子页面的包含块设置 overflow: clip
→ 如果要用滚动条也应从整个视窗的角度考虑，将滚动条加在外面
开发时的tricks & 个人遇到的小问题
检查页面布局：使用 Chrome DevTools 中的 device toolbar
❌ 低效自行缩放浏览器看布局
✅ 直接设置对应断点值
开发样式：大小优先使用组件库内置值
❌ 直接使用绝对值(尽可能避免)
同样以 Chakra UI 为例，先看本地自定义的theme.ts，如未设置就去看default sizes
开发样式：尽量不用针对浏览器的样式
例：想要实现多行文本溢出时末尾出现省略号
最开始的解法
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
相对更好的方式：使用组件中内置属性 noOfLines
网格布局变化：不使用 auto-fill 就会始终为设置的列数
参考：[掘金] 5分钟搞定 CSS Grid 布局
当最大宽度为 1 fr 时，使用 auto-fill 又会延展出多列，最后只好根据断点设置不同的 grid-template-columns
