转载请注明出处：https://blog.csdn.net/dreamer_sen/article/details/82149919
来点干货。
1.什么是rem
rem是指根元素（root element）的字体大小。来看一下例子：
通过上面的例子我们可以看出1rem的值的大小取决于根元素html的字体大小。
2.rem和手机适配有什么关系
假设是这样的
PC端和手机端查看的结果是不一样的
上图的字体是一样大的，只是图的缩放倍数不一样
可以看到，如果我们固定像素，那这个字的大小是不会随着屏幕变小而变小的，但如果我们用了rem，就可以解决这个问题了。
3.rem如何解决手机适配的问题
根据上面的例子，我们就可以找到解决问题的关键：界面要想适配不同屏幕，就需要根据屏幕调节1rem值的大小，屏幕大的1rem值大一些，反之则小。
4.如何根据屏幕大小来改变rem的值的大小呢？
答案是通过屏幕大小来改变根标签（html标签）的font-size
那我们首先就要获取到屏幕大小：
var deviceWidth = document.documentElement.clientWidth;在pc端其实我们会设置最大宽度的，不然你可以想象你的整个电脑屏幕成了手机屏幕，估计没人愿意浏览这样的网页了。
这个设置我们一般会写在body标签中：
html{font-size:100px;}
body{
width: 6.4rem;
max-width: 640px;
margin: 0 auto;
}因为是在pc端开始开发的，所以设置宽度为6.4rem，即为640px（公司规定的，现在流行的是750px）
现在在PC端1rem就是100px，在手机端其实也还是。接下来就要对这个值（html标签的字体大小）进行处理
var deviceWidth = document.documentElement.clientWidth > 640 ? 640 : document.documentElement.clientWidth;三元运算：如果屏幕宽度大于640则设置为640，否则设置为本身宽度
接下来就要根据deviceWidth这个值来改变html标签的文字大小
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';这个6.4从哪里来的？建议你自己思考一下。如果你不懂欢迎你评论问我，哈哈。
5.总结
rem的原理（我所理解的）：就是通过改变根标签的字体大小来实现适配的，其实就是选定了一个标准，这个标准需要根据屏幕大小的变化而变化，所以得有代码辅助。