今天完成的事情：

1. 1. 弄明白了九宫格布局的关键
2. 2. 明白了viewport视口的概念
3. 3. 成功配置NGINX通过手机访问九宫格。

明天计划的事情：

开始任务2

遇到的问题：

九宫格自适应问题，通过疯狂搜索各类实例然后实验得出解决方案和结论。

viewport概念，初期以为响应式布局是通过viewport指令来自动变换，费解此指令的作用，后期疯狂查资料发现，此指令只是修改了视口，响应式布局并不是靠一条指令就能实现，而是靠HTML的布局和CSS的样式来实现响应式。

（遇到什么困难，怎么解决的） 
收获：

1. 九宫格布局的关键并非选用float或者flex，方法的本质都是排列。难点在于自适应如何实现。刚开始设想盒子的宽高来用百分比限制，发现宽度可继承父元素的宽度，但高度在理论上是无限延伸的一个数值，除非父元素指定，否则都为0, 0的百分比肯定为0。 查阅后发现可以用padding-top或者bottom撑开元素，实现了自适应。在排列上，有一点需要注意。如果每个格子的宽度为三等分布局宽度的话，那么还需要预留margin的宽度。初期设想是33%的格子宽度，一旦加上margin为1%的话就无法成为九宫格。后来排查后发现，如果这样计算的话，整个九宫格宽度将超出100%，这样当然无法实现。所以九宫格自动换行。

通过九宫格布局深刻理解了盒模型与float布局与flex布局。

2. viewport视口概念。viewport在移动端分两种，一种是后台渲染布局需要的layout viewport，这个视口除非指定，否则按移动浏览器设置的默认值来显示宽度。想要和视觉视口重合的话添加一条

<meta name="viewport" content="width=device-width, initial-scale=1">

即可。

这条指令得配合响应式布局才能起到作用，如果只是在传统网页上添加这个布局，就只是将网页按PC浏览器的方式渲染好，然后一次性呈现。

3.学会了NGINX配置方法，能通过局域网联接直接访问电脑上的HTML文件。