标签:
以下是reset.js具体内容,是从淘宝网站拔下来的。把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以40转化为rem。比如div宽为40px,除以40为1rem,这个div的宽就写成1rem,整个网页就是计算,最后做出来的网页不用在考虑适配,因为它会自动缩放适配任何手机,比起百分比做出的网站兼容性要好得多,而且能实现动功能也能强大的许多.
! function() { var a = ‘@charset "utf-8"; html{overflow-y:scroll}html,body{font-family:sans-serif}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fn-hide{display:none}html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,div,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,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:\‘\‘}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}.grid{box-sizing:content-box;padding-left:.3rem;padding-right:.3rem;margin-left:-.2rem}.grid:before,.grid:after{content:" ";display:table}.grid:after{clear:both}.grid [class^=col-]{margin-left:.2rem;float:left}.grid .col-1{width:1.1rem}.grid .col-2{width:2.4rem}.grid .col-3{width:3.7rem}.grid .col-4{width:5rem}.grid .col-5{width:6.3rem}.grid .col-6{width:7.6000000000000005rem}.grid .col-7{width:8.900000000000002rem}.grid .col-8{width:10.200000000000001rem}.grid .col-9{width:11.500000000000002rem}.grid .col-10{width:12.8rem}.grid .col-11{width:14.100000000000001rem}.grid .col-12{width:15.400000000000002rem}.grid-thin{box-sizing:content-box;padding-left:.4rem;padding-right:.4rem;margin-left:-.4rem}.grid-thin:before,.grid-thin:after{content:" ";display:table}.grid-thin:after{clear:both}.grid-thin [class^=col-]{margin-left:.4rem;float:left}.grid-thin .col-1{width:.9rem}.grid-thin .col-2{width:2.2rem}.grid-thin .col-3{width:3.5000000000000004rem}.grid-thin .col-4{width:4.8rem}.grid-thin .col-5{width:6.1rem}.grid-thin .col-6{width:7.4rem}.grid-thin .col-7{width:8.7rem}.grid-thin .col-8{width:10rem}.grid-thin .col-9{width:11.299999999999999rem}.grid-thin .col-10{width:12.6rem}.grid-thin .col-11{width:13.9rem}.grid-thin .col-12{width:15.200000000000001rem}.grid-fat{box-sizing:content-box;padding-left:.2rem;padding-right:.2rem;margin-left:0rem}.grid-fat:before,.grid-fat:after{content:" ";display:table}.grid-fat:after{clear:both}.grid-fat [class^=col-]{margin-left:0rem;float:left}.grid-fat .col-1{width:1.3rem}.grid-fat .col-2{width:2.6rem}.grid-fat .col-3{width:3.9000000000000004rem}.grid-fat .col-4{width:5.2rem}.grid-fat .col-5{width:6.5rem}.grid-fat .col-6{width:7.800000000000001rem}.grid-fat .col-7{width:9.1rem}.grid-fat .col-8{width:10.4rem}.grid-fat .col-9{width:11.700000000000001rem}.grid-fat .col-10{width:13rem}.grid-fat .col-11{width:14.3rem}.grid-fat .col-12{width:15.600000000000001rem}‘, b = document.createElement("style"); if (document.getElementsByTagName("head")[0].appendChild(b), b.styleSheet) b.styleSheet.disabled || (b.styleSheet.cssText = a); else try { b.innerHTML = a } catch (c) { b.innerText = a } }(); ! function(a) { function b() { var b = g.getBoundingClientRect().width; b / c > 540 && (b = 540 * c), a.rem = b / 16, g.style.fontSize = a.rem + "px" } var c, d, e, f = a.document, g = f.documentElement, h = f.querySelector(‘meta[name="viewport"]‘), i = f.querySelector(‘meta[name="flexible"]‘); if (h) { console.warn("灏嗘牴鎹凡鏈夌殑meta鏍囩鏉ヨ缃缉鏀炬瘮渚?"); var j = h.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/); j && (d = parseFloat(j[2]), c = parseInt(1 / d)) } else if (i) { var j = i.getAttribute("content").match(/initial\-dpr=(["‘]?)([\d\.]+)\1?/); j && (c = parseFloat(j[2]), d = parseFloat((1 / c).toFixed(2))) } if (!c && !d) { var k = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), c = a.devicePixelRatio; c = k ? c >= 3 ? 3 : c >= 2 ? 2 : 1 : 1, d = 1 / c } if (g.setAttribute("data-dpr", c), !h) if (h = f.createElement("meta"), h.setAttribute("name", "viewport"), h.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no"), g.firstElementChild) g.firstElementChild.appendChild(h); else { var l = f.createElement("div"); l.appendChild(h), f.write(l.innerHTML) } a.dpr = c, a.addEventListener("resize", function() { clearTimeout(e), e = setTimeout(b, 300) }, !1), a.addEventListener("pageshow", function(a) { a.persisted && (clearTimeout(e), e = setTimeout(b, 300)) }, !1), "complete" === f.readyState ? f.body.style.fontSize = 12 * c + "px" : f.addEventListener("DOMContentLoaded", function() { f.body.style.fontSize = 12 * c + "px" }, !1), b() }(window); ! function(a, b) { function c(a) { Object.defineProperty(this, "val", { value: a.toString(), enumerable: !0 }), this.gt = function(a) { return c.compare(this, a) > 0 }, this.gte = function(a) { return c.compare(this, a) >= 0 }, this.lt = function(a) { return c.compare(this, a) < 0 }, this.lte = function(a) { return c.compare(this, a) <= 0 }, this.eq = function(a) { return 0 === c.compare(this, a) } } b.env = b.env || {}, c.prototype.toString = function() { return this.val }, c.prototype.valueOf = function() { for (var a = this.val.split("."), b = [], c = 0; c < a.length; c++) { var d = parseInt(a[c], 10); isNaN(d) && (d = 0); var e = d.toString(); e.length < 5 && (e = Array(6 - e.length).join("0") + e), b.push(e), 1 === b.length && b.push(".") } return parseFloat(b.join("")) }, c.compare = function(a, b) { a = a.toString().split("."), b = b.toString().split("."); for (var c = 0; c < a.length || c < b.length; c++) { var d = parseInt(a[c], 10), e = parseInt(b[c], 10); if (window.isNaN(d) && (d = 0), window.isNaN(e) && (e = 0), e > d) return -1; if (d > e) return 1 } return 0 }, b.version = function(a) { return new c(a) } }(window, window.lib || (window.lib = {})), function(a, b) { b.env = b.env || {}; var c = a.location.search.replace(/^\?/, ""); if (b.env.params = {}, c) for (var d = c.split("&"), e = 0; e < d.length; e++) { d[e] = d[e].split("="); try { b.env.params[d[e][0]] = decodeURIComponent(d[e][1]) } catch (f) { b.env.params[d[e][0]] = d[e][1] } } }(window, window.lib || (window.lib = {})), function(a, b) { b.env = b.env || {}; var c, d = a.navigator.userAgent; if (c = d.match(/Windows\sPhone\s(?:OS\s)?([\d\.]+)/)) b.env.os = { name: "Windows Phone", isWindowsPhone: !0, version: c[1] }; else if (d.match(/Safari/) && (c = d.match(/Android[\s\/]([\d\.]+)/))) b.env.os = { version: c[1] }, d.match(/Mobile\s+Safari/) ? (b.env.os.name = "Android", b.env.os.isAndroid = !0) : (b.env.os.name = "AndroidPad", b.env.os.isAndroidPad = !0); else if (c = d.match(/(iPhone|iPad|iPod)/)) { var e = c[1]; c = d.match(/OS ([\d_\.]+) like Mac OS X/), b.env.os = { name: e, isIPhone: "iPhone" === e || "iPod" === e, isIPad: "iPad" === e, isIOS: !0, version: c[1].split("_").join(".") } } else b.env.os = { name: "unknown", version: "0.0.0" }; b.version && (b.env.os.version = b.version(b.env.os.version)) }(window, window.lib || (window.lib = {})), function(a, b) { b.env = b.env || {}; var c, d = a.navigator.userAgent; (c = d.match(/(?:UCWEB|UCBrowser\/)([\d\.]+)/)) ? b.env.browser = { name: "UC", isUC: !0, version: c[1] }: (c = d.match(/MQQBrowser\/([\d\.]+)/)) ? b.env.browser = { name: "QQ", isQQ: !0, version: c[1] } : (c = d.match(/Firefox\/([\d\.]+)/)) ? b.env.browser = { name: "Firefox", isFirefox: !0, version: c[1] } : (c = d.match(/MSIE\s([\d\.]+)/)) || (c = d.match(/IEMobile\/([\d\.]+)/)) ? (b.env.browser = { version: c[1] }, d.match(/IEMobile/) ? (b.env.browser.name = "IEMobile", b.env.browser.isIEMobile = !0) : (b.env.browser.name = "IE", b.env.browser.isIE = !0), d.match(/Android|iPhone/) && (b.env.browser.isIELikeWebkit = !0)) : (c = d.match(/(?:Chrome|CriOS)\/([\d\.]+)/)) ? (b.env.browser = { name: "Chrome", isChrome: !0, version: c[1] }, d.match(/Version\/[\d+\.]+\s*Chrome/) && (b.env.browser.name = "Chrome Webview", b.env.browser.isWebview = !0)) : d.match(/Safari/) && (c = d.match(/Android[\s\/]([\d\.]+)/)) ? b.env.browser = { name: "Android", isAndroid: !0, version: c[1] } : d.match(/iPhone|iPad|iPod/) ? d.match(/Safari/) ? (c = d.match(/Version\/([\d\.]+)/), b.env.browser = { name: "Safari", isSafari: !0, version: c[1] }) : (c = d.match(/OS ([\d_\.]+) like Mac OS X/), b.env.browser = { name: "iOS Webview", isWebview: !0, version: c[1].replace(/\_/, ".") }) : b.env.browser = { name: "unknown", version: "0.0.0" }, b.version && (b.env.browser.version = b.version(b.env.browser.version)) }(window, window.lib || (window.lib = {})), function(a, b) { b.env = b.env || {}; var c = a.navigator.userAgent; b.env.thirdapp = c.match(/Weibo/i) ? { appname: "Weibo", isWeibo: !0 } : c.match(/MicroMessenger/i) ? { appname: "Weixin", isWeixin: !0 } : !1 }(window, window.lib || (window.lib = {})), function(a, b) { b.env = b.env || {}; var c, d, e = a.navigator.userAgent; (d = e.match(/WindVane[\/\s]([\d\.\_]+)/)) && (c = d[1]); var f = !1, g = "", h = "", i = ""; (d = e.match(/AliApp\(([A-Z\-]+)\/([\d\.]+)\)/)) && (f = !0, g = d[1], i = d[2], h = g.indexOf("-PD") > 0 ? b.env.os.isIOS ? "iPad" : b.env.os.isAndroid ? "AndroidPad" : b.env.os.name : b.env.os.name), !g && e.indexOf("TBIOS") > 0 && (g = "TB"), b.env.aliapp = f ? { windvane: b.version(c || "0.0.0"), appname: g || "unkown", version: b.version(i || "0.0.0"), platform: h || b.env.os.name } : !1, b.env.taobaoApp = b.env.aliapp }(window, window.lib || (window.lib = {}));
标签:
原文地址:http://www.cnblogs.com/well-nice/p/4726589.html