移动端适配rem

需求：

在各中移动设备屏幕中能完美适配，呈现方式不变（相对大小，边距等等）。

问题：

在开发过程中，如果使用”百分比“来布局，高度无法确定，在屏幕放大之后，margin-top通常会出现异常；

另外在不同屏幕中呈现的方式也会有所不同，特别是一些主要以图片为主的网页，因为宽度使用了百分比，但是高度无法使用百分比，倒是出现不等比例的缩放问题。

解决：

1.理解rem相对根节点的单位；

2.rem主要是通过html节点的fontsize确定的；

3.通过在js的window.resize事件中，动态的控制html节点的fontsize大小，来动态控制rem的比例；

4.以640的设计图为例，为了让图片能在不同的设备中高清展示，将所要切的图片都放大2倍，假如图片宽度为600px，那么高清展示就是1200px,由于我js设好的rem和html节点比例是1： 20 * (clientWidth / 320) + ‘px’；

所以600px宽度的设计稿图层（高清为1280px）在320宽度的网页中（其实都一样了，因为我们动态控制了rem的比例，我们只是以320为参考，这样好确定rem的大小，这就是为什么叫rem万金油）展示的rem单位就是600*2/2/2/20=7.5rem

目前存在的问题：

在移动端设备中，所有设备适配没有问题，但是如果放在pc百分百展示的话，图片边距就出现问题，我认为的是图片的大小已经到了极限，没有办法进行百分百填充覆盖，所以边距会出问题，以img标签出现的图片有问题，以background出现的图片没有问题，这也说明了img没百分百填充到div，从而出现了边距，解决的办法应该就是写死了img的宽高，另外vertical-align属性我不懂用啊

附上js代码：

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);