表单界面的兼容PC手机端解决方案

2018-05-02 11:09:31 浏览数 (1)

就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大,如何判断差距呢?我的观点是一是效率,二是质量。Fe这行,如果给你个需求写出个怎么怎么样的界面,我觉得任何人学几个星期肯定都会了,但是能否完成一个具有大局观的界面呢?包括兼容性、自适应,最重要的是扩展性如何呢?(js的封装、抽离,图片、css、js的压缩等等)。部门一些大佬的代码习惯很有个性,但是让人看起来是非常友好的,这是一种功底了~。以后朝这个方向go。

表单界面的兼容PC手机端解决方案

回到正题,上星期开发了个加盟模块,由于这项目比较老了,所以前端只用了ejs模板,大家可以看下该加盟模块效果(可以微信上也看看效果或者chrome调成device模式),内容部分从上往下简单的由图片、文字、表单三个部分组成。图片、文字的兼容手机端比较容易,我就讲讲表单兼容手机端的思路。

做页面之前最重要的是先理清需求,然后进行思考:用不用框架?用什么布局?这样其实能省大量时间。

我有朋友问我怎么兼容手机端,我回答大概就rem等控制字体的方案,flex等自适应布局,媒体元素,最后js控制(欢迎大家补充~)

写表单,大家可能最常用的就是用table了,因为方便,但是table也许是现在最死板的布局了,虽然也有自适应table布局方案,但是性能不佳(有兴趣的朋友可以去查查),然后就是float布局和flex布局了,我觉得两者都可以,但是flex布局是未来的趋势,能用它就多练练,这样就大体思路就清晰了。

代码语言:javascript复制
.franchisee .form {
  display: flex;
  flex-flow: row wrap;
}

flex布局有很多好玩的属性,有机会都试一试,不过用了flex布局后,float属性就失效了。

这样布局写好后,就用媒体元素media进行微调。

pc:                                                                      wx:

代码语言:javascript复制
@media screen and (max-device-width: 768px){}
@media screen and (max-device-width: 480px){}
@media screen and (max-device-width: 320px){}

我对这3个临界值进行了小幅度的调整(主要写了选择地区的展示样式),这里注意不要太依赖用media写响应式界面,否则会造成大量的冗余代码,未来调整也不是很方便。

ps:测试的时候,手机端选择意向地区时,会弹出搜狗输入法,给input价格readonly属性即可;并对一些冗余的JS代码进行了封装。

关于git

学习git的最好的方式就是进一家开放的的公司(比如阿里系的公司)。

以前一个人学习时接触add,commit,push最多~,现在git库里一些新的命令已成为我的新的好伙伴,比如git checkout develop, git log, git reset, git rebase,git reset --hard等。很多命令之前也了解,但是纸上得来终觉浅,绝知此事要躬行。真的是这样子有些东西看了一遍不算数,跟着视频敲一遍也不算数,真的要自己独立地做过才算数。

比如像 git checkout develop命令,以及我进公司才知道的每个产品都有自己的线上环境、生产环境、测试环境,我们开发的时候不可能直接在master上提交代码,否则会乱,会出错,所以要切换到develop分支上进行开发,那假如多个人在develop分支上进行开发,如果每个人都add,commit后直接push,就会自动产生一条merge记录,而这不是我们想要的(不美观),所以在push之前要执行git rebase;

今年打算多看几本书,写写demo,写写总结;

0 人点赞