移動端佈局-Rem封裝

話很少說直接上代碼

window.onload = function(){
    /*720表明設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100表明換算比例，這裏寫100是 爲了之後好算,好比，你測量的一個寬度是100px,就能夠寫爲1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}
複製代碼

看這兩個函數，把這些代碼放到js裏面，規則就是，調用函數，放兩個參數，第一個參數，是設計稿的寬度，第二個參數是px與rem的轉換比例，一般會寫100（由於好算）；固然了，要把這段js代碼最好封裝在一個單獨的js文件裏，而且放在全部的css文件引入以前加載。 實際應用起來就是，#box1{ height:100px;}而調用了rem就是#box1{ height:1rem;}以此類推。 100px = 1rem . 1px = 0.01rem。在頁面中，凡是跟尺寸有關的padding、margin、width、height等等，均可以用rem來寫單位，這樣當不一樣分辨率的手機在看同一個頁面時，效果幾乎是同樣的

designWidth:設計稿的實際寬度值，須要根據實際設置
maxWidth:製做稿的最大寬度值，須要根據實際設置

這段js的最後面有兩個參數記得要設置，一個爲設計稿實際寬度，一個爲製做稿最大寬度，例如設計稿爲750，最大寬度爲750，則爲(750,750)

;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 設置好後才能執行 refreshRem，否則 refreshRem 會執行2次；
	refreshRem();

	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);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);
複製代碼

部分寫法：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}
複製代碼