这周做了两个很简单的PC页面，不知为何突然觉得自己不会做页面了。
做页面嘛，几个div，加点padding，加点margin，换个颜色换个背景，但是这回做页面的时候对于怎么布局老是举棋不定，比如是该用relative还是应该用absolute，是该用left还是margin-left，距离单位该用%还是用px。最重要的事，当页面更大或者更小，或者onsize的时候， 布局会怎么响应。
1.单位
先从距离单位说起。
%设置的大小是以父元素的大小为基准的。在没有设置父元素的宽高的情况下，盒子的大小由盒子内的元素决定，这个时候将距离设置为%或者px并没有什么区别。%布局牵一发而动全身，父元素的改变，父元素的position、width/height的改变，可能都会引起页面很大的变化。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：p {font-size:14px; font-size:.875rem;}
em和rem都是相对大小，移动端对页面字体的渲染存在着差异，用rem布局可能会存在着一些问题。在没有完全掌握各浏览器渲染差异的情况下还是老老实实用px好了。
2.按比例缩放
如果页面里所有的单位都是%，那么页面应该是会根据浏览器大小进行正确缩放的。但是想想都觉得很麻烦，而且一旦要进行修改就要从父元素逐级往下进行修改。在做页面的时候如果遇上内容和背景适配的情况，在js里维护一个背景图被当前视区压缩的比例值，几乎能解决所有背景+内容适配问题。
——2016.4.16