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

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

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

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

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

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

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

.franchisee .form {

  display: flex;

  flex-flow: row wrap;

}

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

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

pc: wx:

@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，写写总结；

巴特西

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

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

关于git

最新文章

热门文章