今天完成的事情：

• 首先，今天罪恶的看了一下午美剧。。。所以任务只能说大致完成
• 目前雪碧图还没弄，但是我感觉攻略里面的工具有点复杂，打算直接在线拼图，明天尝试下
• 最后任务上传到服务器后手机查看发现和谷歌的模拟显示是不一致的，还需要微调。 〒▽〒，所以明天还要继续修改下！！！这里谁知道为什么，求解释~！是因为字体的原因吗？用的都是 rem 单位。

明天计划的事情：

• 抓紧时间把任务六完成，研究下任务七。。后面还有 js 大坑呢

遇到的问题：

• 继续切切切，兼容性目前没去考虑了。。这点还是要注意

收获：

• 学会简单的使用 audio 标签
• 利用伪元素生成汉堡图标
• 加强对 rem 单位的理解；因为谷歌浏览器默认显示的最小字体是 12px，所以给根元素设置 62.5% 其实是 12px，但是这样设置如果要兼容浏览器和手机端的话，布局中高度宽度用到 rem 的都需要修改，因为无论再怎么设置根元素字体大小都是一样，感觉还是比较麻烦。。后来在网上看到有说设置 100px 的，实践发现这样做会导致行内元素的居中有很大的误差，最后调整 20px，用 task6-03 练习了下，感觉后期媒体查询兼容手机端的时候修改的地方不用那么多，毕竟根元素字体能调小了。也不知道这种做法合理不。。希望各位前辈能指导下~谢谢

--以上补充

第一：发现垂直居中对齐是因为匿名文本节点的原因，可以看张鑫旭老师的文章，所以把父元素的 line-height 设置为 0 即可解决。

第二：发现如果要适应移动端的话，用雪碧图很难控制图标大小，因此只用媒体查询设置 zoom 属性来改变图标的尺寸。关于移动端适配还有很多要学，目前就先这样。

第三：就算有浏览器模拟手机端。。最后还是发现还是需要真机，然后这里面又有很大文章- -

成果展示 
源码地址