不需要下載插件的rem移動端適配方案,賊好用(以rem爲單位寫項目)

1、首先新建 rem.js 文件

放入靜態資源的文件夾中,rem.js 文件中放入一下代碼

;
(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;
	}
	//要等 viewport 設置好後才能執行 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);

2、在 main.js 中引入 rem.js

注意:這個是以750px設計稿爲例,所有單位縮小100倍(如:189px寫成1.89rem);

如果設計圖尺寸是375,就把代碼結尾改成(375, 375)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章