今天完成的事情：

其实是学习了3天，因为任务一学的是自适应，在我学习的过程中，看到有响应式布局，于是想学习。到现在终于把这个知识点全部梳理了一遍，然后仿照博客园大神的一篇响应式布局写了一遍，基本算是懂了一些相关的知识。

明天的计划：

温习一遍响应式布局，然后学习任务2。已经注册了GITHUB账号，并且已经完成到步骤5，明天下载GIT软件，观摩学习，希望明天可以先把任务二粗略的过一遍。

遇到的问题：

我不是很确定我这个响应式布局的写法是不是正确。经过多方查证资料，总结如下：

首先，开始编写的时候，可以先编写一个非响应式的页面，写好后，再在HTML的head中添加如下代码：

<meta name="viewport" content="width=devicce,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">设置屏幕按1：1的尺寸显示，并禁止用户缩放页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">这段代码表示兼容IE和CHROME浏览器。

<meta name="HandHeldFriendly" content="true">

之后再添加MediaQuery和响应式代码,比如：@media screen and (max-width:980px){}，就是终端分辨率小于980px时，浏览器按此样式渲染，可以写成自己想要的样式。

1.不确定先写非响应式页面是否标准？

2.什么情况下要考虑pixel-ratio（像素比）？

收获：

1.在添加响应式样式时需要注意，由于终端横屏竖屏分辨率不同，需要分别设置，代码：orientation:landscape(横屏)/portrait(竖屏)

图片响应式的方法：将图片液态化，可以适应任意的宽度，代码是：

#wrap img{

max-width:100%;

height:auto;

}

这样，图片会以ID为wrap的容器的宽度的改变而改变以达到等宽扩充，height:auto;是为了保持图片原始的宽高比例，以防止图片失真。

2.字体样式设置

响应式的字体应该关联其父元素的宽度，才能适应客户端的宽度，CSS3的新单位是rem,rem是相对于根元素的，所以要先设置根元素的字体。

3.font-size:0;可以消除diaplay:inline-block的元素之间的空隙。