以下是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. 浮点型数据转整型的丢失精度问题（C++）

    如下代码:http://ideone.com/xcgHgw #include <iostream> using namespace std; int main() { // your co ...

  2. Spring、SpringMVC区别

    1. 为什么使用Spring ? 1). 方便解耦,简化开发 通过Spring提供的IoC容器,可以将对象之间的依赖关系交由Spring进行控制,避免硬编码所造成的过度程序耦合. 2). AOP编程的 ...

  3. validation-api各注解的用法

    入参用@Valid,要不下面实体类中的注解不生效 @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为True@DecimalMax(value) 被注解的 ...

  4. Spring声明式事务配置详解

    Spring支持编程式事务管理和声明式的事务管理. 编程式事务管理 将事务管理代码嵌到业务方法中来控制事务的提交和回滚 缺点:必须在每个事务操作业务逻辑中包含额外的事务管理代码 声明式事务管理 一般情 ...

  5. 开通blog,记录学习历程

    2017.12.15日,开通blog,用于回忆知识点的记录和整理. 开通本blog主要做以下几点事情: 1.巩固知识点,基础打牢: 2.在基础牢固的基础上,学习流行的框架: 3.在框架牢固的基础上学习 ...

  6. mongo-2ds索引对超过半球范围的适用性测试

    以下测试均基于mongo v4.0 win10 一.GeoJSON GeoJSON是一种基于json的经纬度描述数据格式.在这里主要服务于2dsphere索引查询. 基本格式  <type:&q ...

  7. 虚拟机 linux 没有分配id

    输入命令  $ vim /etc/sysconfig/network-scripts/ifcfg-ens33  将ONBOOT=no改为ONBOOT=yes  输入命令  $ :wq          ...

  8. Swing学习2——图标添加Icon接口使用

    废话没有,看代码. 主要就是通过实现Icon接口在标签添加一个圆形图标,并在框架中显示. package com.sword.swing_test; import javax.swing.*; imp ...

  9. 个人洛谷账号地址——https://www.luogu.org/space/show?uid=181909 附上NOIP查分系统

    个人洛谷地址:       https://www.luogu.org/space/show?uid=181909 NOPI查分地址:      http://bytew.net/OIer/

  10. golang对不同系统的编译

    Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译 # mac编译linux执行文件 CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go ...