2018-12-03-新手教程重构思路

2022-02-15

布局防止拉伸

百分比加固定宽度
大屏考虑媒体查询
分组件进行宽度固定或者自适应（对于像图表一类的尽量就不要适应了，防止单位拉伸过大，不美观）
现在常用的布局宽度为1180px，考虑在非大屏下尽量使用1180来限制宽度

详细尝试

将左下方的返回上一页按钮的定位left设置为2%，即让返回按钮始终位于左下角。（由于此处并不对chart部分做适应，所以chart和return-icon的相对位置会发生变化）

2018-12-03-新手教程重构思路

文章图片
小屏下的return图标位置.png 大屏下的return图标位置.png

【2018-12-03-新手教程重构思路】将下方的forecast-box（包含主要的信息和按钮部分内容）宽度写死为1180px，符合大部分网页的宽度，且可以保证不会因为屏幕宽度与flex布局的问题导致的横向拉伸，使得支付按钮向右移动过度，页面不美观。

image.png

小屏下的支付按钮位置.png

2018-12-03-新手教程重构思路

文章图片
大屏下的支付按钮位置.png 同样，设置宽度避免了公式中等号间距过宽的问题

小屏下的等式展示.png
大屏下的等式展示.png 可扩展性（之后添加新的关卡或是页面）

考虑尝试添加一下新的关卡

上一页的翻页逻辑精简（查询类似的gal游戏逻辑，学习）图表的绘制要更为合理精炼下一次重构要添加埋点，记录pv uv

推荐阅读

上一篇：我在格陵兰之上学未遂记

下一篇：这些简单的道理却少有人做到