表单界面的兼容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,写写总结;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

IOS 10锁屏界面不好用?来看这份严肃的交互分析!

以iOS 10的锁屏界面为例,让你知道如何有理有据地分析一个界面交互的好坏。iOS说:“清晰度,咱俩分手吧”。以往的iOS锁屏界面非常简单直接,但是来到今年的i...

3216
来自专栏知晓程序

除了表情包,这款小程序,还能帮你在朋友圈花式晒图

今天,知晓程序(微信号 zxcx0101)为你推荐一款玩图小程序「嗨图」,带你做图带你「嗨」。

942
来自专栏MixLab科技+设计实验室

如何用代码控制浏览器下载知乎大v的粉丝数据?

欢迎用户在后台留言需解答的问题, mixlab 将会不定期的从中选择提供解决方案。同时 mixlab 微信群已经汇集了机器学习、自然语言处理、前端、后端、产品经...

1093
来自专栏编程微刊

Photoshop怎么实现图片局部马赛克

1742
来自专栏即时通讯技术

微信团队分享:iOS版微信的高性能通用key-value组件技术实践

本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称MMKV)。

1132
来自专栏phodal

我的职业是前端工程师【四】:如何选择合适的前端框架,告别选择恐惧症

将 package.json 中的 Ionic 版本改为 2.0.0 的时候,我就思考一个问题。这个该死的问题是——我到底要用哪个框架继续工作下去。 刚开始学习...

1935
来自专栏韩东吉的Unity杂货铺

零基础入门 45:使用图片字体第二步,关联Unity

Hello,今天要给大家分享的是在Unity里使用图片字体的第二步,也是最后一步,就是关联Unity。

1335
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(二):设计策略 - 腾讯ISUX

1612
来自专栏phodal

Mifa Design:一个服务于 Markdown 的设计体系

嗯,UI 框架,这已经不是一个很好的时代了。可对于 Design Systems 来说,这还是个不错的开始。 Material Design 是 Google ...

2466
来自专栏大史住在大前端

一统江湖的大前端(7)React.js-从开发者到工程师

许多入职前端的开发者,都是从熟练使用框架进行业务逻辑开发而开始的。说到框架,Vue,React,Angular三大框架都已经圈定了自己的用户群,从粉丝的数量...

1332

扫码关注云+社区

领取腾讯云代金券