html文件:rem和html有关 em和当前盒子有关
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<title>移动端布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
html{
/* font-size: 20px;*/
/*1rem=20px*/
}
/* html{
100%;
height: 100%;
overflow: hidden;
}*/
body{
100%;
height: 100%;
/*overflow: auto;*/
padding-top: 80px;
}
.head-box{
100%;
height: 80px;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.list{
font-size: 14px;
}
.list .item{
float: left;
1rem;
height: 1rem;
border: 1px solid black;
margin: 0.1rem;
}
/*
移动端单位
相对单位和绝对单位px
相对单位
em:相对于当前盒子的设置的字体;
20px = 1em
rem:相对于html的字体大小;
*/
</style>
</head>
<body>
<header class="head-box">
<div class="head-top"></div>
<div class="head-bottom"></div>
</header>
<ul class="list clearfix">
<li class="item">1111111</li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<div></div>
<div></div>
</body>
<script src="./resize.js"></script>
</html>
js代码:注意在设置时当前设计的尺寸 和 自定义的换算 width为当前的尺寸,启动会自动检测
/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px 1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem
*/
// 1rem = 100px 1px = 0.01rem
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width)
width && (docEle.style.fontSize =100 * (width / 1226) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));