使用margin来做适应屏幕的定位

	<div class="one"> </div>
	<div class="two"> </div>

	<div class='screem'>
		<div class="demo">
			<div class="test">
				
			</div>
		</div>
	</div>
	<style>
	
		body {
			margin:0;
			padding:0;
		}
		
		.screem {
			position:relative;
			100px;
			height:100px;
			z-index:10;
		}
		
		.demo {
			position:absolute;
			 100%;
			height: 100%;
			background-color: #ccc;
		}
	
		.test {
			 100px;
			height: 100px;
			margin-top:50%;
			background-color: red;
		}
		
	</style>

　　上面的html的代码，可以实现test相对于父节点demo的相对定位，记得这里的margin-top：50%，

是相对于screem未分配剩余宽度的偏移量，这里未分配的宽度是100%。

如果你想便宜500px，用500/100 = 500%。让margin-top：500%，就可以偏移500px了。如果遇到屏幕缩放的时候，如果是绝对定位，

那么就写500px。这样，就出现问题了，而屏幕缩放，水平距离必定变短，导致，margin-top：500%，也一样变小，所以可以适应缩放。

如果你写的是margin-left：50%。也是相对于水平宽度的50px，而不是垂直方向。

		.screem {
			position: relative;
			100px;
			height:100px;
			z-index:10;
		}
		
		.demo:hover {
			200px;
			height:200px;
		}
	
		.demo {
			position:absolute;
			 100%;
			height: 100%;
			background-color: #ccc;
		}
	
		.test {
			position: absolute;
			left: 100px;
			top: 100px;
			padding: 50%;
			background-color: red;
			z-index: 10;
		}

　　这里使用padding，撑开元素，虽然子元素什么都不包含，但是可以使用padding：50%。把他撑到和父元素一样的大小。

padding-left: 50%;
padding-top: 50%;

这样是元素，宽度的一半的平方。如果是10（宽）×20（高）的，最后就是5×5，记住，margin和padding的百分比，都是通过父元素的宽度设定的，

但是，记得父元素要加入position：relative；

当然，解决这种定位问题，为了保证移动端适配的问题，可以使用rem做绝对定位。

通过设置html初始的html的字体大小，比如font-size：100px；这样，来视屏6，

然后通过js计算，得到5的屏幕宽度，附一段调整viewport，初始化html中的font-size的js代码。仅供参考参看。

(function(win, doc) {
    var docEl = doc.documentElement,
        ua = win.navigator.userAgent,
        metaEl = docEl.querySelector('meta[name="viewport"]'),
        dpr = 0,
        scale = 0;
    // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale
    //设置dpr
    if (!dpr && !scale) {
        var isAndroid = ua.match(/android/gi),
            isIOS = ua.match(/iphone/gi),
            devicePixelRatio = win.devicePixelRatio;
        if (isIOS) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }
    // 设置data-dpr属性
    docEl.setAttribute('data-dpr', dpr);
    //将根据已有的meta标签来设置缩放比例
    if (metaEl) {
        var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    }
    //无viewport则新增缩放的viewport，达到高清效果
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    };
    //设置html的font-size
    refreshRem = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';　　//这里初始化的html的font-size是按照100px计算的。
    };
    //绑定事件
    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})(window, document);