rem单位介绍：相对根元素（html）的长度单位，1rem=16px 。
font-size:计算值的倍数
适配原理：用rem取代原来的px，动态修改html的font-size适配。
举例说明：
我们可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px，那么换成rem单位，直接除以16就好
<div class="divSize"> <p>文字大小</p> </div>
.divSize{ width:20rem;/*iphone5:320px*/ height:10rem; background:pink; } .divSize p{ font-size:2rem; }
通过JS控制适配屏幕：
<script>
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName(‘html‘)[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + ‘px‘;
</script>
如此，我们便通过js设置根元素字体大小的方式达到各种屏幕基本一直的效果体验。
原文：https://www.cnblogs.com/ddzhou/p/12340714.html