em参考该元素的字体大小而定
rem->root 参考根元素(html)的字体大小, html默认字体的大小: 14px
使用rem单位开发移动端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 15rem;
height: 100px;
background-color: red;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div></div>
<script type="text/javascript">
//获取dpr
var dpr = window.devicePixelRatio;
//获取缩放比
var scale = 1 / dpr;
//重写写入meta标签
document.write('<meta name="viewport" content="width=device-width,initial-scale='+scale+'" />');
//获取设备宽度(分辨率)
var w = document.documentElement.clientWidth;
//获取html
var html = document.getElementsByTagName("html")[0];
html.style.fontSize = w / 15 + "px";
</script>
</body>
</html>