<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>rem phone test</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust:none;
}
body {
height: 100%;
margin: 0 auto;
overflow: auto;
-webkit-user-select: none;
position: relative;
}
header,footer {
width: 100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
font-weight:bold;">#ccc;
}
.bd {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.box {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right:0.5rem;
margin-bottom:0.5rem;
}
.blue-box {
font-weight:bold;
background-color:red;
}
.org-box {
font-weight:bold;
background-color:blue;
}
</style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
</div>
<footer>我是页脚</footer>
<script>
(function (doc, win) {
//获取根节点，将它赋值给一个变量
var docEl = doc.documentElement,
//利用三目运算来判断window中是否有这个事件，将它赋值给变量
//orientationchange()是改变窗口的方向
//resize()是计算窗口改变了多少次
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//获取可视区域的宽度
var clientWidth = docEl.clientWidth;
//进行判断是否要执行下面的换算
if (!clientWidth){
//0 undefined "" 都会返回false
return;
}
//进行单位的换算，通过窗口的变化，来进行根节点的单位变化
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener){
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); //匿名函数的传参
</script>
</body>
</html>
