有点事耽误了几天

一，今天完成的事情

任务四初涉及

关于header

header是html5新涉及的一个标签，

深入思考关于px、em、pem

看到一篇博文中指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位。

对比拉勾网app、网易移动端、淘宝移动端三者的布局。

拉勾网app是典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。这个规则是一套基本的适配规则，对于这种简单app来说已经足够。这里用px单位就好了。从app底部的下载框可以看出来，是对iphon4的屏幕大小做适配的，那比他屏幕大的也就没问题了。

网易采用的手法是页面里除了font-size之外的其它css尺寸都使用了rem作为单位。使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦，网易是如何解决的呢？最根本的原因在于，网易页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果。看代码就知道为啥font-size是直接写到html的style上面的了（js设置的原因）。

淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。

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

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：

设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。

二，明天计划的事情

任务四未达标返回相应步骤，任务五初涉及

三，遇到的问题

图片插入的时候有点大，后来百度了下，用了css3中的

transform:scale(0.8)

括号里的系数为缩放比例。

上传代码的时候，本地和远程的文件应该合并后才能上传本地的新文件。可我都先pull再push还是这样。

四，收获

通过今天的学习，初步接触到了移动端的页面布局方式，代码的熟练还要在以后的实战中进一步加强