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单位和百分比。

你可能感兴趣的:(h5,js,css前端坑)