前言：

     今天对自己的任务一做了个了结，说实在的，这些天的学习效率很差，总是会被身边的一些琐事打断思路，导致不能全身心的投入。精神状态也很差，希望在未来的日子里可以学习效率高一些，那样才能学好。还有就是学习方法的问题了，不要在一个任务上卡太多时间，一个个任务刷过去，回头来看自己之前写的代码肯定会有不一样的理解。

今天完成的事：

反思：

       一个网页不同的人会有不同的写法，但是好的代码（没有冗余）却会让网页占用内存更少，所以写网页不单单是要把一张网页写出来，更重要的是看看有没有更好的实现方式，就像任务一一样，相信很多人的写法都是不一样的，就拿我的和带我的师兄的比较，视觉效果肯定天壤之别。

     以下是我的写法：

   以下是师兄的写法：

    就实现方式和代码量来比较的话师兄都是胜我一筹。之前做任务前了解过了viewport，可是却不知道却还有这种功效，看来以任务为导向的学习方式依然是站的住脚的，所以说任务一个一个往下做的话，肯定会有不一样的理解的。

这里就viewport的理解做一个总结：

   移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大的变化，那就意味着一个物理像素点实际上嵌入了好几个像素。不仅如此，用户的缩放也会引起css中px的变化。当用户把页面放大一倍，那么css中的1px所代表的物理像素也会增加一倍；反之，页面缩小一倍，css中的1px所代表的物理像素也会减少一倍。

   用法：在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

详细的解释：https://www.cnblogs.com/2050/p/3877280.html

  做任务二碰到的问题：

  由于之前的密码忘记了，所以试了好多遍，都不能上传代码，后来查了下秘钥不能被覆盖只能重新申请，于是修改了秘钥，方法可以参考https://blog.csdn.net/nishiwodebocai21/article/details/70255671，添加了秘钥后，发现依然不能上传代码到GitHub上。出现了master->master(non-fast-forward)问题：

解决办法：造成的原因是因为上传的代码中和远程有重复，导致不能上传代码，可以直接强制覆盖解决

                 git push  -f  origin master  

明天计划：

                 完成任务三