今天完成的事情：完成了任务三的代码，使本地可以通过配置的域名访问，最后上传链接到电脑已经手机上。
明天计划的事情：再看看任务三，思考一下深度思考剩余的问题，然后开始任务四。
遇到的问题：1.编写代码时候，无论如何操作网页都会跟着页面变大而变大，因为自己都是写完之后再看成果，知道了要写一步看一步   ；2.我的任务三文件夹里有图片和代码，不知道如何上传到githbu上，最后通过师兄帮助，直接拖文件夹就可以，之后进行展示。

收获：1.通过今天的学习，学到了px   em   rem  %  vw  vh  vm  等单位有什么区别：

        px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系，  px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。

        em:是相对单位。em其实就是一种排版的测试单位，

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算，也就是说整个页面内的em值并非完全一样。

      rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。

     %(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。

    vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。

2.如何进行自适应网页设计

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

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

把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。