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>