rem布局适配和CSS样式重置

1,045 阅读1分钟

rem布局适配和CSS样式重置

h5-rem.js(压缩): 依据  750*750  设计稿

!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);

h5-rem宽度自适应(简1)

function add() {
	var html = document.documentElement;
	var hei = html.clientWidth;
	var fz = hei / 750 * 100 + "px";
	html.style.fontSize = fz;
};
add();
window.addEventListener("resize", add, false);

h5-rem自适应宽度(简2)

function rem() {
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + "px";
}
rem();
window.addEventListener('resize', rem, false);

h5-rem自适应宽度(简3)

! function(n) {
	var e = n.document,
		t = e.documentElement,
		i = 750,
		d = i / 100,
		o = "orientationchange" in n ? "orientationchange" : "resize",
		a = function() {
			var n = t.clientWidth || 320;
			n > 750 && (n = 750);
			t.style.fontSize = n / d + "px";
		};
	e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);

移动端rem&点击事件&返回事件

(function(w, t) {
	/* 移动端适配方案 */
	w.setFontSize = function() {
		let width = document.documentElement.clientWidth / 16,
			styleNode = document.createElement("style");
		styleNode.innerHTML = "html{font-size:" + width + "px!important}";
		document.head.appendChild(styleNode);
	}
	/* 返回 */
	w.goBack = function() {
		history.go(-1)
	}
	/* touchByM事件 */
	t.fn.touchByM = function(callback) {
		this.on('touchstart', function() {
			this.isMove = false;
		});
		this.on('touchmove', function() {
			if (!this.isMove) this.isMove = true;
		})
		this.on('touchend', function() {
			if (this.isMove) return;
			callback.call(this);
		})
	}
})(window, $);
setFontSize();

min压缩版

(function(a,b){a.setFontSize=function(){let a=document.documentElement.clientWidth/16,b=document.createElement("style");b.innerHTML="html{font-size:"+a+"px!important}",document.head.appendChild(b)},a.goBack=function(){history.go(-1)},b.fn.touchByM=function(a){this.on("touchstart",function(){this.isMove=!1}),this.on("touchmove",function(){this.isMove||(this.isMove=!0)}),this.on("touchend",function(){this.isMove||a.call(this)})}})(window,$),setFontSize();

m-reset.css(压缩)

*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section{margin:0;padding:0;border:0}a{text-decoration:none}button{user-select:none}img{vertical-align:middle}img:not([src]),img[src=""]{opacity:0}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}input,select,button,textarea{font-size:100%;font:inherit}html,body{height:100%;overflow-x:hidden}

处理日期字符串

function versionCode() {
	var dt = new Date(),
		y = dt.getFullYear(),
		m = dt.getMonth() + 1,
		d = dt.getDate();
	return v = y + '.' + m + '.' + d;
}

标签移动端适配

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="telephone=no" name="format-detection">
</head>