1.首先,要知道rem是根据根元素的font-size来计算的,根元素即页面的html元素。
例: html{ font-size:10px; } 那么width:2rem; 的意思是width: 2* 10px = 20px;
2.所以,如果希望页面上元素的大小随着页面的宽度动态改变== 根据页面宽度动态改变根元素的font-size。
<script>
//获取html
const htmlEl = document.documentElement;
function setRemUnit(){
//获取视口宽度
const htmlWidth = htmlEl.clientWidth;
//根据宽度计算font-size, 一般是除以10
const fontSize = htmlWidth/10;
//将font-size设置到html上
htmlEl.style.fontSize = fontSize + "px";
}
//初始化,第一次进来的时候设置一次
setRemUnit();
//当屏幕发生变化时改变根font-size的大小
window.addEventListener("resize",setRemUnit);
</script>
<style>
html{
font-size: 20px;
}
.box{
width: 5rem;
height: 5rem;
background-color: red;
}
</style>
<body>
<div class="box"></div>
</body>
3.拖动边缘,动态改变页面大小即可测试。
注:还可以使用媒体查询来动态改变根元素font-size。