以下是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 = {})); |