一、今天完成的事情：

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