表单界面的兼容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/"
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

目录
相关文章
Echarts手机端无刷新实现图表自适应横屏和竖屏的解决方案
Echarts手机端无刷新实现图表自适应横屏和竖屏的解决方案
384 0
|
存储
将PC端的apk文件通过微信文件分享到手机,后缀名有.1
将PC端的apk文件通过微信文件分享到手机,后缀名有.1
298 0
|
5月前
|
PHP
驾校在线考试系统源码 手机+PC+平板自适应
Thinkphp在线考题源码 驾校在线考试系统 手机+PC+平板 自适应,机动车驾驶培训学校驾校类网站源码带手机端 运行环境:php+mysql
181 11
驾校在线考试系统源码 手机+PC+平板自适应
|
4月前
|
JavaScript
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)
117 0
|
4月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
5月前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
66 0
|
6月前
|
监控 网络协议 数据安全/隐私保护
手机socket套接字75秒超时问题及解决方案
手机socket套接字75秒超时问题及解决方案
89 0
|
6月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
59 0
|
6月前
|
Java C# Android开发
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
为了帮助用户在使用 APP 时提高其稳定性和使用体验,有时候我们需要让安卓手机的界面跳转到手机自带的自启动管理界面,以此来引导用户将 APP 加入自启动,确保应用程序在后台运行时不被系统杀死,从而保证应用程序服务的稳定性和可靠性。同时,这也可以提高用户的使用体验,使用户能够更好地享受应用程序的功能和服务。
349 0
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
下一篇
无影云桌面