今天完成的事情：将任务十三彻底解决，把三个页面的CSS部分全部写到了一个CSS文件里

明天计划的事情：开始任务十四

收获：

移动端有哪些常用的布局方式？

1、固定布局

固定布局即固定整个页面的宽度，如320px，640px等。优点是比较简单，元素可以定宽定高。缺点是无论在什么分辨率的手机上显示都是固定宽度，对大屏手机来言会有两边会有空白。

2、流动布局

固定布局使用px，rem等作为单位，流动布局使用%作为单位。优点是流动布局可以很好的自适应。缺点是不够灵活，添加元素时，需要更改其他元素的值。

3、Flex布局

Flexbox称为弹性布局，会根据页面的剩余宽度自动分配空间。它决定元素如何在页面上排列。能够通过flex-grow，flex-shrink等属性扩展或收缩flex容器内的元素。 Flexbox布局最适合应用程序的组件和小规模的布局。

4、媒体查询

媒体查询可以根据不同的设备宽度加载不同的css样式。使用媒体查询可以实现移动端的响应式。

例子如

@media(max-width:768px) {

         div {

               background-color: red;

     }

}

即设备宽度小于768px时，div元素的背景颜色为红色

5、栅格布局

栅格布局是bootstrap中的一个系统，将一个容器分为12列，通过col-xx-x来控制每一个列的占比。如col-lg-3即在屏幕宽度大于1192px时，这个容器占3列，使用的时候给相应的div设置类名。