一、概念
rem指对于根元素的字体大小单位，例如根字体font-size为10px，则1rem大小即等于10px
二、案例
使用媒体查询+rem或者js，在不同宽度的视口下自动调整字体大小
<body>
<div>rem字体大小</div>
</body> <script>
var c=()=>{
// 获取设备的宽度
let w = document.documentElement.clientWidth;
// 以20px为依据，除以320宽度，如果大于40则按40px大小，如果小于40就按所得数为字体大小
let n = (20*(w/320)>40?40 + "px" : (20*(w/320) + "px"));
document.documentElement.style.fontSize=n;
}
window.addEventListener("load",c);
window.addEventListener("resize",c);
</script>
<style>
div{
font-size: 1rem;
}
</style>页面效果展示 - 以320宽度为例，字体大小为20px
?页面效果展示 - 以640宽度为例，字体大小为40px
?页面效果展示 - 大于640宽度为例，字体大小仍为40px
?页面效果展示 - 小于320宽度为例
?