以下是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. JavaScript中的获取元素的方法

    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...

  2. 前端开发面试题总结之——JAVASCRIPT（二）

    ___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...

  3. [Oracle][DATAGUARD] PHYSICAL STANDBY环境里，使用CATALOG管理Primary和Standby

    1.先使用控制文件构筑好PHYSICAL STANDBY环境(Primary:Single 11.2.0.4,Standby Single 11.2.0.4) 2.构筑好Catalog用的服务器(Ca ...

  4. 自己设置 WiFi

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

  5. hosts 添加主机和ip映射

    背景:在服务器搭建环境时,迁移项目后,停止服务出现以下问题. 原因:项目停止或启动找不到映射名称或服务. 解决:修改hosts文件.hosts文件地址 /etc/hosts         添加主机和 ...

  6. element-项目用到偏门方法~

    开发项目的时候,组件库的使用有时会为我们节省开发时间,提高开发效率,但组件库样式有时与我们的设计图出入很大,还有的方法也很偏门,主要官方文档有时候对于一些方法和属性介绍的也比较少,以下是我在工作中总结 ...

  7. Python字符串与格式化的一点用法

    #python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 1.python于C语言不同的是,python没有字符的概念,所谓的字符就是长度为1的字符串,使用切片或者索引同样可以对字 ...

  8. 第八周学习笔记-ADO.Net中DataTable的应用

    ADO.Net中DataTable的应用  一.知识点描述 1.概述:DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表),是ADO.Net库中的核心对象. 2.DataTabl ...

  9. 信号single

    信号 Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 Model signals pre ...

  10. mac 下mysql安装

    系统环境: OS X Yosemite 10.10.3 登录用户: fx (有 sudo 权限) MySQL版本: 5.5.49 (mysql-5.5.49-osx10.9-x86_64.tar) M ...