移动端项目总结

移动端项目总结（一）

在2017年1月11日，完成了我的第一个完整的移动端项目，这个项目为期7天的时间，从切图到js交互、从个人到团队合作每个阶段都有不一样的发现，以及不一样的成长和收获。

在这个项目之前，自己以PC端的项目为主，移动端的也都是swiper，jQuery mobile和mui等为主导或辅助进行，这一次除了应用jQuery和移动端的时间touchJS外，其他的款被框架都没有用，成长和收获是非常大的！

这个项目从开始到结束后，发现自己原生写移动端的项目，比较难处理的也是刚开始时候比较苦恼的，就是手机端的适配问题。就像苹果4到苹果7之间的屏幕大小差别，以及plus的大屏，为了解决这些问题，让用户有更好的体验在开始的时候，对手机适配做了比较大的功夫，以及在项目中时对适配的调节与关注。

移动端的适配问题有字体适配和模块之间的适配。由于之前的是借助框架之类的，自己要注意的不是太多，刚开始写的时候处于蒙圈装填。由于之前写过有的都是百分比的形式布局的，可那些项目不大两天就好了，页面也不多。这次的页面完全不同，有了一些不错需求，并且项目也比较大，二十多个页面。切图的时间也花费了不少时间，要景psd图转化为自己所需要的，有一些图标的可以下载。

对于字体的适应，有的人说用62.5%的方法，加给html用rem的方法，我提的是以响应式的方式，用媒介查询在不同屏幕下，展示不一样的字体大小，如图：

将适配不同屏幕大小的字体加到body，这样可以通过em单位来处理字体的大小情况，根据不同的屏幕适配出不一样的大小。

对于排版的适配，有两种布局方式是自我认为比较不错的，一为响应式布局，二位自适应布局，这两种布局是做适配中比较不错的两种不就方式。还有的利用弹性布局的，这个也不错不过弹性布局也应该属于这两种布局的吧！这两种布局的特性在这用通俗易懂的解释说下：

响应式布局：所谓的响应式，就是根据不同的情况做出不一样的变化，虽然自适应布局也是但两者是有区别，响应式布局的变化是在环境变化时，做出相对应的排列方式，在美观许可的情况下改变，改变后杂乱无章的那是排版的为题，就不属于响应式了！

自适应布局：自适应也就是百分比布局，见名知意就是以百分比的方式布局，根据环境的变化改变自身的大小等的情况，这也就是和响应式区别的地方了；自适应布局不会改变布局方式，会根据环境变化调控自身达到适应，使得布局就像是原来的放大或缩小，不改变布局状态。

总的来说：自适应就是改变自身大小，已达到环境变化的大小；而响应式是改变排列方式，已到达需求！

在写这个项目的初期，有一种无力下手的感觉，就是每个模块的高度，如果都用百分比自适应，显然不合适，用自适应对移动端的适配，自己现在调节的也不完善！在请教了他人和自己的总结后，就将这两种布局的特点结合，景模块的高度固定、宽度以百分比的方式，将布局调节出来！在调节第一个页面时感觉比较的麻烦，因为再用框架时考虑的东西不用多，用框架就行，自己写的时候每个细节都要自己一点点的调，以达到和设计图“相符”的标准，也就是比较适合！因为设计图的尺寸在移动端的不适应，所以不能用1px不差来说！所谓的”完事开头难“，在调整好第一个页面后，接下来的调节就迎刃而解了。

在今天项目结束的时候感觉自己在移动端的感触颇多，自接下来中再遇到移动端的就轻松多了！

在接下来的工作学习中，在做好前端的基础上，也要在后台php和数据库MySQL下点功夫；对php和MySQL之前也学习过，加上前一段自己对nodejs和mogodb的学习了解，对后台数据的交互ajax的请求交互数据，有了更深的了解！

一步一个脚印，在做好了自己的当前工作后，也要增强自己的技能，不断的提升不断的打破！