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

简介: 就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大,如何判断差距呢?我的观点是一是效率,二是质量。

就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(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,写写总结;

 

作者:牧云云
出处:http://www.cnblogs.com/MuYunyun/"
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

目录
相关文章
|
9月前
|
存储
将PC端的apk文件通过微信文件分享到手机,后缀名有.1
将PC端的apk文件通过微信文件分享到手机,后缀名有.1
232 0
|
4月前
|
Java C# Android开发
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
为了帮助用户在使用 APP 时提高其稳定性和使用体验,有时候我们需要让安卓手机的界面跳转到手机自带的自启动管理界面,以此来引导用户将 APP 加入自启动,确保应用程序在后台运行时不被系统杀死,从而保证应用程序服务的稳定性和可靠性。同时,这也可以提高用户的使用体验,使用户能够更好地享受应用程序的功能和服务。
101 0
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
vue--ios手机input点击手机输入键盘顶起页面解决方案
vue--ios手机input点击手机输入键盘顶起页面解决方案
|
8月前
|
开发框架 iOS开发
手机软键盘弹起导致页面变形的一种解决方案
手机软键盘弹起导致页面变形的一种解决方案
302 0
|
网络协议 Android开发
|
9月前
|
前端开发 Android开发 iOS开发
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
258 0
|
9月前
|
数据采集 缓存 前端开发
漏刻有时数据可视化大屏常见问题(4)手机端数据采集ajax安卓手机安卓微信浏览器无法跳转的问题解决方案
漏刻有时数据可视化大屏常见问题(4)手机端数据采集ajax安卓手机安卓微信浏览器无法跳转的问题解决方案
78 0
|
9月前
|
网络协议 Linux Android开发
Android部分手机4G网第一次请求很慢(wifi正常)解决方案
Android部分手机4G网第一次请求很慢(wifi正常)解决方案
256 0

热门文章

最新文章