今天完成的事情：今天在看师兄师姐们的日报，发现自己写的网页有很多问题，task4需要改的地方挺多的。

明天计划的事情：修改好task4，争取找到task5的思路。

遇到的问题：task5没有思路，看起来两个页面是独立，不用连接起来，动画效果应该是第二个页面需要用到吧？

收获：今天在看师兄师姐们的日报学习了他们是怎么编写task的，其中他们用到了一个单位是rem，我现在还是有点没弄懂，但是知乎上的回答挺不错的，附上链接：http://www.zhihu.com/question/21504656

这个回答我感觉比较易懂。

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：王佳欣
链接：http://www.zhihu.com/question/21504656/answer/85135845
来源：知乎

需求来介入：
都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。
我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。
（1）iPhone4的时候，希望网页的内容文字大小12px=12*（320/320）px，按钮的大小是240px。
（2）Iphone6的时候，虚妄网页的内容文字大小14px=12*（375/320）px，按钮的大小是280px，等比缩放。
（3）Iphone6 Plus的时候，虚妄网页的内容文字大小15.5px=12*（414/320）px，按钮的大小是310px，等比缩放。

以前的做法
在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制
viewport 的 initial-scale （网页缩放比例）。
如：iPhone4下：

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

那么对应的到了iPhone6需要调整缩放比例   initial-scale=375/320 =1.18

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

同理到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30

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

早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。
缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

rem做法
现在【天猫】的做法就是用rem来做。
rem（font size of the root element）是指相对于根元素的字体大小的单位（可以联想一下em）。也就是比如我定义：

html{ font-size:14px}

那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是

.test-box{
        font-size:2rem;
       /*font-size:28px;*/
       /*2*14px/
}

我们可以理解为，一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会变化。