锐客网

  1. 首页 > it技术 > >

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

布局防止拉伸

  1. 百分比加固定宽度
  2. 大屏考虑媒体查询
  3. 分组件进行宽度固定或者自适应（对于像图表一类的尽量就不要适应了，防止单位拉伸过大，不美观）
  4. 现在常用的布局宽度为1180px，考虑在非大屏下尽量使用1180来限制宽度
详细尝试
  1. 将左下方的返回上一页按钮的定位left设置为2%，即让返回按钮始终位于左下角。（由于此处并不对chart部分做适应，所以chart和return-icon的相对位置会发生变化）
2018-12-03-新手教程重构思路
文章图片
小屏下的return图标位置.png 大屏下的return图标位置.png
  1. 【2018-12-03-新手教程重构思路】将下方的forecast-box（包含主要的信息和按钮部分内容）宽度写死为1180px，符合大部分网页的宽度，且可以保证不会因为屏幕宽度与flex布局的问题导致的横向拉伸，使得支付按钮向右移动过度，页面不美观。

    image.png
小屏下的支付按钮位置.png 2018-12-03-新手教程重构思路
文章图片
大屏下的支付按钮位置.png 同样，设置宽度避免了公式中等号间距过宽的问题

小屏下的等式展示.png
大屏下的等式展示.png 可扩展性（之后添加新的关卡或是页面）
  1. 考虑尝试添加一下新的关卡
上一页的翻页逻辑精简（查询类似的gal游戏逻辑，学习） 图表的绘制要更为合理精炼 下一次重构要添加埋点，记录pv uv

    推荐阅读


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

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