发表于: 2018-06-30 22:43:01
1 614
一、今天完成的事情:
1.开始任务14-15,正在拆出头部组件块
2.学习了移动开发的时候如何将设计稿转换成页面合适的单位尺寸
二、明天计划的事情:
继续任务14-15,完成页面1-2
三、遇到的问题:
不使用Bootstrap写出折叠菜单,一开始在网上找到一个响应式折叠菜单的方法,主要思路是使用nav,ul,li,a这几个标签来建立,然后通过媒体查询当窗口宽度缩到到一定程度的时候,ul显示图标,li隐藏,a宽度100vw,然后通过hover图标显示下拉框,可是这时候发现个问题...手机端没有hover效果,手机端点击图标之后,下拉菜单出现,然后就无法收起来了...只好改用其他方法,看了下别人任务实现下拉菜单的方式是通过label来实现,具体还不知道是如何实现的,明天学习使用。
四、收获:
移动开发的时候如何将设计稿转换成页面合适的单位尺寸
1. 设计稿应有约定的大小(例750px),选取一个手机的设备宽度做量取大小值(例375)。
2. 限制使用rem,选取一个font-size值作为的基数。
3. 计算每个元素的rem值,进行界面开发。
4. js计算当前设备宽度的fontSize,并设置回html元素上。(适配步骤)
5. 媒体查询作为补救措施,特殊设备宽度设置特殊的font-size。(这步不是必须的)
注意
1. px可以用,但是当心效果会偏大或偏小,元素可能还会往下掉。
2. 界面开发时只针对iPhone6(375pt)一种机型,页面完成后,才做适配步骤。
3. 设计师可能会输出标注图(750px)和@3x切图(1125px)两种图。用@3x切图的设计稿切图,在超清屏幕才能清晰;标注图可用来计算元素长宽;但是设计师可能为了简单,就只输出一种视觉图,就如文章开头说的750px、1080px。
4. 使用sass或less可以让代码写得直观、简单。
总结
设计稿转换页面单位尺寸,简单做就是——先针对某个机型做,再做适配。
进度:任务14-15
任务开始时间:06.30
预计demo时间:07.02
是否有延期风险:有
禅道:http://task.ptteng.com/zentao/project-task-766.html
评论