今天完成的事情：

              1：今天上午完成了对小课堂的知识点总结和归纳。

              2：确定了小课堂的具体日期和题目《移动端的常见布局》。

              3：完成了任务十三的一个页面重构。

              4：和老大学习更加优秀的学习方法。

明天计划的事情：

             完成任务十三。并且尝试搭建自己的库。

  遇到的问题：

            在完成小课堂的知识点总结归纳后发现：

                1、 固定布局

                 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

                2、流体布局

                流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。

                3、flex布局

                Flexbox是css3引入新的布局模式，也称弹性布局，会根据页面的剩余宽度自动分配空间。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测的展现出来，能够扩展和收缩flex容器内的元素，以最大限度的填充可以空间。 Flexbox布局最适合应用程序的组件和小规模的布局。

                4、媒体查询和rem布局

                媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据节点的字体大小来计算，使用媒体查询

和rem可以实现移动端的响应式。

如：媒体查询

@media screen and (max-width:768px) {

在这个范围里写上你要修改的css样式。

}

                5、栅格布局

                bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：是bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列。然后通过col-的类名控制每一列的占比，使用的时候给相应的div设置col-lg-3，md，sm，xs，以此完成布局。

                 由于师兄要求，当初学习栅格系统的时候明确要求不允许使用栅格系统布局，能手写的都手写，在刚对栅格系统布局完成知识点归纳后，散修师弟就提交了一个完全由栅格系统完成布局的任务八。

     使用方式就是将一个容器划分成12列。然后通过col-的类名控制每一列的占比，使用的时候给相应的div设置col-lg-3，md，sm，xs，以此完成布局。熟练后有点方便。

         收获：

                  对布局的运用更加灵活，对bootstrap有了进一步的熟练。