今天完成的事情：

1、学习了viewport的概念，了解到css中的1px并不等于设备的1px，css中的是虚拟像素，设备屏幕则是物理像素，两者并不相等。

2、学习PPK的关于三个viewport的理论：layout viewport、visual viewport、ideal viewport。

3、学习利用meta标签对viewport进行控制。

4、完成任务一中九宫格的自适应大小。

遇到的问题：

1、自适应的问题。通过查询和学习，找到一种可自适应的方法。

   首先利用meta标签对viewport进行控制：

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

   然后添加css样式如下：

.big{

width:90%;

height:1000px;

border:1px solid #999;

margin:5%;

}

.mini{

float:left;

width:29.3%;

height:0;

padding-bottom:29.3%;

background-color:orange;

margin:2%;

border-radius:10px;

}

   用chrome浏览器进行初步测试可实现自适应。

2、这样完成的页面与任务展示的效果有差别，代码有待进一步优化。

明天计划的事情：

1、进一步优化代码，复习这几天学习的知识点。

2、对比师兄们的代码，深入学习。

收获：

1、viewport相关知识点的学习，初步认识它的用法和各属性的作用。

2、自适应是个很神奇的东西，刚学习时做起来有点难度，涵盖的内容很多。