最近在進(jìn)行響應(yīng)式的開(kāi)發(fā)，在網(wǎng)上找了一些內(nèi)容收集在這里
- （一）
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判斷窗口有沒(méi)有orientationchange這個(gè)方法，有就賦值給一個(gè)變量，沒(méi)有就返回resize方法厘托。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小設(shè)置成跟窗口成一定比例的大小，從而實(shí)現(xiàn)響應(yīng)式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三個(gè)參數(shù)：第一個(gè)是事件名稱(chēng)比如點(diǎn)擊事件onclick勇吊，第二個(gè)是要執(zhí)行的函數(shù)，第三個(gè)是布爾值
doc.addEventListener('DOMContentLoaded', recalc, false)//綁定瀏覽器縮放與加載時(shí)間
})(document, window);
//alert(document.documentElement.clientWidth/320)
參考網(wǎng)址：
移動(dòng)端自適應(yīng)js
web app變革之rem
2.（二）
腳本默認(rèn)為640px窍仰，非640px寬度設(shè)計(jì)稿需在<head>添加下面的 meta 標(biāo)簽屬性
content="750" 汉规，750改為實(shí)際設(shè)計(jì)稿寬度
<meta name="W_design" content="750" />
(function(e, t) {
function n() {
for (var e = navigator.userAgent,
t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], n = !0, i = 0; t.length > i; i++) if (e.indexOf(t[i]) > 0) {
n = !1;
break
}
return n
}
function i() {
var t = a.getBoundingClientRect().width;
n() && 2047 > t && (t = 640);
var i = t * 100 / w;
a.style.fontSize = i + "px",
d.rem = e.rem = i
}
var r, o = e.document,
a = o.documentElement,
s = o.querySelector('meta[name="viewport"]'),
c = o.querySelector('meta[name="flexible"]'),
l = 0,
u = 0,
d = t.flexible || (t.flexible = {});
var w = o.querySelector('meta[name="W_design"]') ? o.querySelector('meta[name="W_design"]').getAttribute('content') : 640;
if (s) {
console.warn("將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例");
var p = s.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
p && (u = parseFloat(p[1]), l = parseInt(1 / u))
} else if (c) {
var f = c.getAttribute("content");
if (f) {
var h = f.match(/initial\-dpr=([\d\.]+)/),
m = f.match(/maximum\-dpr=([\d\.]+)/);
h && (l = parseFloat(h[1]), u = parseFloat((1 / l).toFixed(2))),
m && (l = parseFloat(m[1]), u = parseFloat((1 / l).toFixed(2)))
}
}
if (!l && !u) {
e.navigator.appVersion.match(/android/gi);
var g = e.navigator.appVersion.match(/iphone/gi);
e.navigator.appVersion.match(/ipad/gi);
var v = e.devicePixelRatio;
l = g ? v >= 3 && (!l || l >= 3) ? 3 : v >= 2 && (!l || l >= 2) ? 2 : 1 : 1,
u = 1 / l
}
if (a.setAttribute("data-dpr", l), !s) if (s = o.createElement("meta"), s.setAttribute("name", "viewport"), s.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), a.firstElementChild) a.firstElementChild.appendChild(s);
else {
var y = o.createElement("div");
y.appendChild(s),
o.write(y.innerHTML)
}
e.addEventListener("resize",
function() {
clearTimeout(r),
r = setTimeout(i, 300)
},!1),
e.addEventListener("pageshow",
function(e) {
e.persisted && (clearTimeout(r), r = setTimeout(i, 300))
},!1),
"complete" === o.readyState ? o.body.style.fontSize = 12 * l + "px": o.addEventListener("DOMContentLoaded",
function() {
o.body.style.fontSize = 12 * l + "px"
},!1),
i(),
d.dpr = e.dpr = l,
d.refreshRem = i,
d.rem2px = function(e) {
var t = parseFloat(e) * this.rem;
return "string" == typeof e && e.match(/rem$/) && (t += "px"),
t
},
d.px2rem = function(e) {
var t = parseFloat(e) / this.rem;
return "string" == typeof e && e.match(/px$/) && (t += "rem"),
t
}
})(window, window.lib || (window.lib = {}));
參考網(wǎng)址：
移動(dòng)端自適應(yīng)js（二）
3.（三）
responsive-page
