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