em和rem的区别，rem适配的原理

一、em是什么？

em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。一般用到段落的首行缩进 2em 

二、rem是什么？

rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。常被用来做移动适配，pc端页面不推荐使用rem。

三、em和rem的区别

rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。

rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。

四，rem的适配原理 

根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验 

• 将 设备视口 划分成 n 份， n 可以是 任何正确的值（如 flexible.js 中的 n = 10）
• 设置 设备视口 根元素 html 的 font-size = 设备视口宽 ÷ 份数 n，即得到 设备视口 1 rem 到底表示 多少设备视口 px

 将设备视口分成 10 份，设置 根元素 html 的 font-size = 375 ÷ 10 = 37.5 px，即 1 rem= 37.5 px

 

配置rem

window.onload = () => {
    document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px';
}
window.onresize = () => {
    document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px';
}

 总结：本人才疏学浅，水平有限，请大家多多包涵和指点。多谢🤝🫡 👍。  加油✊🫶