今天完成的事情：
今天重新给我分配了新的师兄，任务5直接被师兄打回来了。之前一直没有注意到viewport的问题。
所以今天重新学习了viewport的内容
  > 什么是viewport?
    > viewport是用户网页的可视区域（“视区”），手机浏览器是把页面放在一个虚拟的窗口（viewport）中的，通常这个窗口都比手机屏幕要宽，这样就不用把每个网页挤到很小的窗口中，用户可以通过缩放来看网页的不同部分。

  > 如何设置viewport?
    > 通过meta标签来设置viewport
  例：
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  viewport常用的6个属性：
    width： 控制viewport的大小，可以指定一个具体的值或者特殊的值（device-width）
    height：高度
    initial-scale：初始缩放比例；
    maximum-scale：允许用户缩放到的最大比例
    minimum-scale：允许用户缩放到的最小比例
    user-scalable：用户是否可以手动缩放
  注意： scale的数值越大，页面越小。
学习了less:
  > 什么是less?
    >less是一种动态样式语言，less将CSS赋予了动态语言的特性，如变量，继承，运算，函数，它可以在客户端上运行，也可以借助node.js在服务器端运行。
  > 如何使用less?
    > 可以在网站中引入less.js，但是这个过程非常缓慢，不建议这么使用
    > 推荐方式是：提前编译成CSS代码
  > 安装less
    > 首先需要安装node.js，打开终端输入以下语句
      > npm install- g less
    > 安装完成less后使用以下命令将less文件编译成CSS文件
      > lessc styles.less > styles.css

明天计划的事情：
还是先重构任务5吧，重构完成后继续学习less.

遇到的问题：
目前在任务5中增加了<meta name="viewport" content="width=device-width,initial-scale=1.0">后，初始页面居然变大了，变得不正常了，如下图：

还是先重做一下任务5，看一下问题在哪儿吧。

收获：
学习了viewport，了解到viewport在响应式设计上的作用。
小结：
初期的知识还是不够扎实，希望在后期的学习中发现之前的不足并且及时补上不足的东西。