<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的代碼，可以實現(xiàn)test相對于父節(jié)點demo的相對定位，記得這里的margin-top：50%，

是相對于screem未分配剩余寬度的偏移量，這里未分配的寬度是100%。

如果你想便宜500px，用500/100 = 500%。讓margin-top：500%，就可以偏移500px了。如果遇到屏幕縮放的時候，如果是絕對定位，

那么就寫500px。這樣，就出現(xiàn)問題了，而屏幕縮放，水平距離必定變短，導致，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的屏幕寬度，附一段調(diào)整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;
    // 一物理像素在不同屏幕的顯示效果不一樣。要根據(jù)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);
    //將根據(jù)已有的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);

　　

總結(jié)

以上是生活随笔為你收集整理的使用margin来做适应屏幕的定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。