移动端rem布局之JS动态设置根节点像素 html页面

217 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
		<!-- 禁止缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no,user-scalable=0" />
		<title></title>
		<script>
			(function(doc, win) {
			    var docEl = doc.documentElement,
			        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			        recalc = function() {
			            var clientWidth = docEl.clientWidth;
			            var clientHeight = docEl.clientHeight;
			            if (!clientWidth) return;
			            if (clientWidth > clientHeight) {
			                docEl.style.fontSize = 100 * (clientWidth / 1334) + 'px';
			         
			            } else {
			                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
			         
			            }
			        };
			    if (!doc.addEventListener) return;
			    win.addEventListener(resizeEvt, recalc, false);
			    doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
	</head>
	<body>
		<div id="app"></div>
                <!-- 此处是引入的cdn插入 -->
		<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
			<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
		   <% } %>
		<!-- built files will be auto injected -->
	</body>
</html>