• 今天完成的事情：
  

按照个人理解基本完成task1

标准1：小格子圆角，border-radius:具体数值or相对H/W百分比。颜色，截图软件取色+rgb转换。

标准2：width大于768px时，格子外框contain设置长宽为40vw，格子外框contain大小随屏幕宽度变化。小格子box H/W用百分比设置，大小随父元素row的H/W变化。

标准3：width小于768px的移动端，格子外框contain设置长宽为100vw，使得宽度等同屏幕宽度。

标准4—8：书写时已经注意

• 明天计划的事情：
  

若任务一审核过关接着下一任务学习git和svn，目前只会用网页版github上传代码&显示demo，每天传改文件都要花很长时间

• 遇到的问题：
  

1.很快写出了格子外框contain固定宽高的样式，企图设置百分比使得格子外框contain大小随屏幕宽度变化，然而fail。。。H/W设置百分比是”分别“相对于父元素H/W的百分比。

解决：

用vw。1vw相当于窗口宽度的1/100。格子外框contain的高宽均设置相同的vw即可得到正方形，而不是相对于窗口成比例缩放。

其他：

rem:相对于根元素font-size值的倍数。对于不同的宽度的窗口设置不同的字体尺寸，同样是2rem即可在不同的宽度的窗口显示不同尺寸。

2.写好的页面点击F12-设置某移动设备发现整个页面被自动缩小了，而不是小于768px格子外框contain宽度等同屏幕宽度。

解决：

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

保证浏览器宽度=设备屏幕宽度，不要各种缩放

• 收获总结：
  

1.block元素垂直居中写法/ 神奇的boxsizing:border-box

2.学会了vw用法

3.初步尝试响应式布局

• 一个疑问
  

简单的将移动设备理解为【屏幕宽度<768px】是否妥当？个人只是参考ipad 宽度

没料到一个简单的九宫格从下午两点搞到现在。。。去年的账号登上来搞任务一大概是僵尸复活了。。