标签:
以下是reset.js具体内容,是从淘宝网站拔下来的。把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以40转化为rem。比如div宽为40px,除以40为1rem,这个div的宽就写成1rem,整个网页就是计算,最后做出来的网页不用在考虑适配,因为它会自动缩放适配任何手机,比起百分比做出的网站兼容性要好得多,而且能实现动功能也能强大的许多.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
! 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/alizeegod/p/4788033.html