1. 程式人生 > >rem做到pc端到移動端自適應

rem做到pc端到移動端自適應

將下面自適應js程式碼放到head下面body上面

adaptive(document, window);//初始載入自適應
function adaptive(doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function() {
		var clientWidth = docEl.clientWidth;
		if(!clientWidth) return;
		if(clientWidth >= 1920) {
			docEl.style.fontSize = '70px';//這個是根據我自己專案調的
		} else {
			docEl.style.fontSize = 70 * (clientWidth / 1920) + 'px';
		}
	};
	if(!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	}
	//隨瀏覽器大小自適應
	window.onresize = function() {
	adaptive(document, window);
}

因為要我的專案要留點白邊,所以根據我的html為70px,最外層父盒子我給了width: 25.4rem;剛剛留有白邊,這個父盒子不想留白邊可自行調整寬度。

最後要注意一點是絕對不能有px!,可以為rem單位和百分比。