HackWeek踩坑记(1) - 移动端H5适配

开篇 有幸参加了2017年南昌大学家园工作室举办的为期两周的黑客马拉松(Hack Weeks)。其实我很想通过类似的活动提升自己的能力。只不过当我真正参与到项目的开发中,才会发现,自己还是太年轻! 本系列文章记录了我在参与整个团队协作过程中遇到的问题和心得体会,其内容将会涵盖前端开发、UI设计原则、SQL语法、服务器配置以及如何高效地进行团队协作等方面的内容。 第一个坑:移动端适配与视觉稿的呈现 可以说在这次Hack Week活动中折磨我最久的就是视觉稿。因为我以前并没有移动端适配和根据视觉稿来编写UI的经验,所以,当我拿到设计师给我的视觉稿时,其实我是一脸懵逼的。对视觉稿使用的不熟练以及移动端适配经验的缺失,成为在后来的两个星期中,不断折磨我的梦魇,也出于这些原因,给设计师带来很大的麻烦。因此,我深感自己的能力不足,尤其是移动端H5页面制作方面的知识,亟待补充。 今天我们的项目终于完成了调试工作,趁此机会赶紧补习了移动端适配的方案。 在下面的文章中,我将参考使用Flexible实现手淘H5页面的终端适配学习移动终端H5适配 几个概念 物理像素(Physical Pixel) 物理像素又被称为设备像素(Device Pixel),他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。 举例:iPhone 6的dp为 750 × 1334 设备独立像素(…