https://niusmallnan.com/js/hotcss.js

1(function(window, document) {
2
3	'use strict';
4
5	//给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
6	var hotcss = {};
7
8	(function() {
9		//根据devicePixelRatio自定计算scale
10		//可以有效解决移动端1px这个世纪难题。
11		var viewportEl = document.querySelector('meta[name="viewport"]'),
12			hotcssEl = document.querySelector('meta[name="hotcss"]'),
13			dpr = window.devicePixelRatio || 1,
14			maxWidth = 750, //最大显示尺寸
15			designWidth = 0;
16
17		dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
18
19		//允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
20		if (hotcssEl) {
21			var hotcssCon = hotcssEl.getAttribute('content');
22			if (hotcssCon) {
23				var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
24				if (initialDprMatch) {
25					dpr = parseFloat(initialDprMatch[1]);
26				}
27				var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
28				if (maxWidthMatch) {
29					maxWidth = parseFloat(maxWidthMatch[1]);
30				}
31				var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
32				if (designWidthMatch) {
33					designWidth = parseFloat(designWidthMatch[1]);
34				}
35			}
36		}
37
38		document.documentElement.setAttribute('data-dpr', dpr);
39		hotcss.dpr = dpr;
40
41		document.documentElement.setAttribute('max-width', maxWidth);
42		hotcss.maxWidth = maxWidth;
43
44		if (designWidth) {
45			document.documentElement.setAttribute('design-width', designWidth);
46			hotcss.designWidth = designWidth;
47		}
48
49		var scale = 1 / dpr,
50			content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale +
51			', user-scalable=no';
52
53		if (viewportEl) {
54			viewportEl.setAttribute('content', content);
55		} else {
56			viewportEl = document.createElement('meta');
57			viewportEl.setAttribute('name', 'viewport');
58			viewportEl.setAttribute('content', content);
59			document.head.appendChild(viewportEl);
60		}
61
62	})();
63
64	hotcss.px2rem = function(px, designWidth) {
65		//预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
66		if (!designWidth) {
67			//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
68			//否则可以在第二个参数告诉我你的设计图是多大。
69			designWidth = parseInt(hotcss.designWidth, 10);
70		}
71
72		return parseInt(px, 10) * 750 / designWidth / 100;
73	}
74
75	hotcss.rem2px = function(rem, designWidth) {
76		//新增一个rem2px的方法。用法和px2rem一致。
77		if (!designWidth) {
78			designWidth = parseInt(hotcss.designWidth, 10);
79		}
80		//rem可能为小数，这里不再做处理了
81		return rem * 100 * designWidth / 750;
82	}
83
84	hotcss.mresize = function() {
85		//对，这个就是核心方法了，给HTML设置font-size。
86		var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
87
88		if (hotcss.maxWidth && (innerWidth / hotcss.dpr > hotcss.maxWidth)) {
89			innerWidth = hotcss.maxWidth * hotcss.dpr;
90		}
91
92		if (!innerWidth) {
93			return false;
94		}
95
96		document.documentElement.style.fontSize = (innerWidth * 100 / 750) + 'px'; //设计尺寸750 根元素为100px  便于计算
97
98		hotcss.callback && hotcss.callback();
99
100	};
101
102	hotcss.mresize();
103	//直接调用一次
104
105	window.addEventListener('resize', function() {
106		clearTimeout(hotcss.tid);
107		hotcss.tid = setTimeout(hotcss.mresize, 33);
108	}, false);
109	//绑定resize的时候调用
110
111	window.addEventListener('load', hotcss.mresize, false);
112	//防止不明原因的bug。load之后再调用一次。
113
114
115	setTimeout(function() {
116		hotcss.mresize();
117		//防止某些机型怪异现象，异步再调用一次
118	}, 333)
119
120	window.hotcss = hotcss;
121	//命名空间暴露给你，控制权交给你，想怎么调怎么调。
122
123
124})(window, document);