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

自适应reset.js布局 用于手机端页面编写的更多相关文章

  1. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  2. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  3. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  4. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  6. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  7. PC端页面转换成手机端页面的分辨率问题的理解

    PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...

  8. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  9. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

随机推荐

  1. python中list,tuple,dict,set等深浅拷贝的问题记录

    对于字典.元祖.列表 而言,进行赋值.浅拷贝和深拷贝时,其内存地址的变化是不同的. 1.赋值 赋值,只是创建一个变量,该变量指向原来内存地址,如: 1 2 3 n1 = {"k1" ...

  2. linux 虚拟机配置固定ip

    参考这边博客: https://blog.csdn.net/u014466635/article/details/80284792 但是这个有个小问题,就是没有配置dns,导致连不上公网 /etc/s ...

  3. Python学习第四天

    一.数字 int 二.字符串 str #以下均为补充内容 #对于空字符串是假 #数字0是假 #数字和字符串可以相互转换 # a="123" # b=int(a) # a=123 # ...

  4. 自己设置 WiFi

    不想安装免费WiFi? 简单,一行命令搞定 首先,打开你的 cmd 面板, 然后敲出命令: netsh wlan set hostednetwork mode=allow ssid=wifi key= ...

  5. JArray数组转换为DataTable

  6. SharePoint Framework 基于团队的开发（五）

    博客地址:http://blog.csdn.net/FoxDave 升级SharePoint Framework项目 部署SharePoint自定制解决方案到生产环境并不意味着生命周期的结束,因为还有 ...

  7. WPF 系统关闭模式

    WPF App.xaml中ShutdownMode的属性值 OnLastWindowClose(默认值) 最后一个窗体关闭或调用Application对象的Shutdown()方法时,应用程序关闭. ...

  8. HTML5 浏览器支持

    css重置 header, section, footer, aside, nav, main, article, figure { display: block; } 为HTML添加新的元素 < ...

  9. python3读取sqlyog配置文件中的MySql密码

    这个人有什么目的?: 我多多少少听过一些安全圈的大牛说到类似的思路,大意是可以通过扫描各种程序和服务的配置文件(比如SVN的文件,RSYNC的配置文件等), 从中发现敏感信息,从而找到入侵的突破口.沿 ...

  10. volatile--领域分界线？

    volatile是一个类型修饰符(type specifier),就像大家更熟悉的const一样,它是被设计用来修饰被不同线程访问和修改的变量.volatile的作用是作为指令关键字,确保本条指令不会 ...