布局防止拉伸
- 百分比加固定宽度
- 大屏考虑媒体查询
- 分组件进行宽度固定或者自适应（对于像图表一类的尽量就不要适应了，防止单位拉伸过大，不美观）
- 现在常用的布局宽度为1180px，考虑在非大屏下尽量使用1180来限制宽度
详细尝试
- 将左下方的返回上一页按钮的定位left设置为2%，即让返回按钮始终位于左下角。（由于此处并不对chart部分做适应，所以chart和return-icon的相对位置会发生变化）
小屏下的return图标位置.png
大屏下的return图标位置.png
-
将下方的forecast-box（包含主要的信息和按钮部分内容）宽度写死为1180px，符合大部分网页的宽度，且可以保证不会因为屏幕宽度与flex布局的问题导致的横向拉伸，使得支付按钮向右移动过度，页面不美观。
image.png
小屏下的支付按钮位置.png
大屏下的支付按钮位置.png
同样，设置宽度避免了公式中等号间距过宽的问题
小屏下的等式展示.png
大屏下的等式展示.png
可扩展性（之后添加新的关卡或是页面）
- 考虑尝试添加一下新的关卡
网友评论