今天完成的事情：

提交任务13；对任务13存在的手机屏幕自适应、头部与主体内容宽度不一致问题进行调试和修改；复习任务13的代码和知识点。

明天计划的事情：

前几个任务做的还是比较匆忙了，相关的知识点和有些代码实现掌握的还不是很牢固，明天将之前的几个任务再复习巩固一下。如果有时间的话，就开始做任务14。

遇到的问题：

第1个页面PC端显示正常，但手机端只有一小块，没有铺满屏幕。

一点一点看代码，进行调试，弄了好久，最后才发现是自己把viewport打成了viewpoint。。要细心。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

手机端没有问题，但在PC端chrome浏览器中发现头部比主体部分要宽一些。

后来经过查找发现是最大宽度设置的问题。header是max-width:64rem，main设置的是max-width：640px。但是chrome浏览器默认的最小字体是12px，而自己设置的根字体大小是font-size: 62.5%，也就是10px。但chrome浏览器发现自己小于它的默认最小字体时就自动把根字体调整为12px了，导致header比main要宽。

解决办法就是把它们设置成一致的单位就ok了。

收获：

最近在用less编程，感觉里面的嵌套很好用，可以让结构更清楚一些。但同时也考虑到嵌套过多的话会影响加载速度，因此就比较疑惑。经过查找，找到了答案：

首先，css确实要避免太多嵌套，一是因为性能，二是因为嵌套带来的权重规则会变得复杂，三是降低了可读性。所以一般情况下嵌套最多不要超过3层。

可以将

.ul{
    li{
        a{
            &:hover
        }
    }
}换成

.ul{
    li{

    }
    li a{
        &:hover
    }
}

也就是嵌套几层后就尽快出来，没必要的尽量少嵌套。用类名来解决相应查找问题。