rem:相对单位
指相对于**根元素(HTML)**的字体大小(font-size)的单位。适用于任何设定长度的单位。
font-size : 10px ;
1rem = 10px;
p{font-size:10px;font-size:1rem;}
js 来获取设备宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name='viewport' content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
div p{background: red;margin-bottom:20px;height:5rem;}
html{font-size:60px}
</style>
</head>
<body>
<div>
<p style='font-size:0.2rem'>0.2rem</p>
<p style='font-size:0.4em'>0.4rem</p>
<p style='font-size:0.6rem'>0.6rem</p>
<p style='font-size:0.8rem'>0.8rem</p>
<p style='font-size:1rem'>1rem</p>
<p style='font-size:2rem'>2rem</p>
<p style='font-size:3rem'>3rem</p>
</div>
</body>
<script>
function resize(){
document.documentElement.style.setProperty('font-size', (document.documentElement.clientWidth/6) + 'px')
}
window.onresize = resize
resize()
</script>
</html>