2016/8/23

今天完成的事：

1. 修改Task10-1代码，基本上按照PSD布局；

2. 自适应还未完成。

明天计划的事：

1.继续学习Bootstrap知识；

2.开始Task10-2。

今天遇到的问题：

1. 代码开头声明font-size: 62.5%;发现写出来的结构怎么看怎么跟PSD对不上，网上看了一个微博才发现，原来谷歌浏览器最小默认字体是12px，所以后面的代码n*rem其实不是n*10px而是n*12px，解决办法就是改成font-size: 625%;这样1rem=100px，后面的px=（n/100）rem；

2. 栅格等份布局时，结构与PSD有差距，原因是把整个等分了，在PSD里把需要等份的内容量出宽度，然后限定一个max-width，再进行栅格等份布局；

3. 栅格5等份没有用@沈墨空推荐的方法，而是用了媒体查询，当页面足够大时，强行限定每等份的宽度为20%，当页面小于媒体查询设定的临界值，就是栅格响应式布局，同样10等份的时候也是这个方法。

4. 导航栏的内容设置了line-height，当页面缩小，导航栏变成图标，点开之后，里面的内容的行高跟缩小之前一样，太大了，有没有办法取消呢？

5. 看到张鑫旭的一篇博客，讲了一个媒体查询进行自适应，字体图片等比较平滑的缩放的方法，不是一般到了临界值的跳动。目前还没上手试，明天试一试。链接：

  http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/

收获:

 1.大致如问题中解决办法。

修改：

1.导航栏缩小成图标，行高用@media控制；

2.完成整个页面自适应，采用前面说的张鑫旭写的办法，缩放比较平滑；

3.两行以上文字没有垂直居中，暂时未解决；

4.出现下图中的错误问题，原因没找着在哪，并不是一直这样，页面缩放过程中，有时正常，有时错位。

5.又发现个问题，添加媒体查询自适应后，设置的max-width无效了，内容又铺开了整个页面。