分别介绍用于适配时的优缺点
rem
以html根节点的font-size为基准的适配方案，实际效果可以简单理解为将界面元素进行缩放。一般还需要额外的js来配合修改html根节点的font-size
html根节点是指哪个节点? html还是body?
根节点当然是html节点
css设置根html节点的方式
方式一
html {
font-size: 16px;
}
方式二
:root {
font-size: 16px;
}
伪类 :root 等价于 html 选择器
监听视口变化，动态修改根html节点的字体大小
移动端适配方案实践-rem和vw - 掘金 (juejin.cn)
vw,vh,vmin,vmax
基于浏览器视口宽度/高度的适配方案。实际效果也可以简单理解为将界面元素进行缩放。vw是将浏览器视口分为100份，100vw表示浏览器视口完整宽度，100vh表示浏览器视口完整高度，无需额外的js辅助
vmin是指vw，vh中较小的那个
vmax是指vw，vh中较大的那个
浏览器视口
PC端浏览器窗口大小是可以调整的，因此PC端的浏览器视口是可变的。
移动端浏览器窗口大小大部分情况都是不可调整的，因此移动端视口宽度，大部分情况下都等同于设备宽度
media query
给css加入限定条件，让特定的css只在限定条件内生效。这种方式一般用于针对不同的设备特性，适用不同风格的样式。并非简单的对界面元素进行缩放，也无需额外的js辅助
如何选择?
应该以实际的需求兼容性出发，再结合需要的效果进行选择确认。
如果你需要考虑IE兼容性，那优先考虑REM, 否则应该优先考虑vh,vw方式，如果某个地方，你需要根据不同的设备特性，采用不同的样式，那应该使用media query方式
rem (root em) units | Can I use... Support tables for HTML5, CSS3, etc
"vw" | Can I use... Support tables for HTML5, CSS3, etc
扩展
vw辅助rem适配方式去掉rem适配方式依赖的js
css - vw+rem移动端自适应布局 - 越小皓的前端专栏 - SegmentFault 思否
横屏问题
通常我们是基于竖屏的宽度进行开发适配的，因此产出的结果实际是以竖屏宽度为基准的，而如果此时切换到横屏，那么，原本的宽度就变成了高度，原本的高度就变成了宽度。这可能会导致字体会很大（超出预期的那种），复杂界面的布局也可能因此乱掉。
移动端rem横竖屏的适配以及华为等机型rem失效的问题-CSDN博客
小程序横屏rpx单位显示过大 | 微信开放社区 (qq.com)
css - vw+rem移动端自适应布局 - 越小皓的前端专栏 - SegmentFault 思否
部分华为手机rem问题
有些型号的华为手机使用rem时，内容会超出屏幕宽度的问题_手机内容超出屏幕范围-CSDN博客
解决方案
横屏时依然使用宽度或高度中较小的那个作为基准即可(为什么使用的较小的那个？因为竖屏状态通常都是宽度小于高度，)
css - vw+rem移动端自适应布局 - 越小皓的前端专栏 - SegmentFault 思否
小程序横屏rpx单位显示过大 | 微信开放社区 (qq.com)
移动端rem横竖屏的适配以及华为等机型rem失效的问题
移动端rem横竖屏的适配以及华为等机型rem失效的问题_rem 横竖屏变化时-CSDN博客
移动端使用rem布局，在华为机型上超出屏幕_pad横屏rem处理-CSDN博客
sass实现px转rem, px转rpx, px转vw
sass实现px转rem, px转rpx, px转vw - 掘金 (juejin.cn)
微信小程序的rpx问题
微信小程序的rpx是基于竖屏状态下的屏幕宽度设计的，那么切换横屏时，实际效果就必然非预期，要么在小程序端不采用使用rpx方案进行适配，如果采用rpx适配，那就不要让小程序能横屏。
小程序横屏rpx单位显示过大 | 微信开放社区 (qq.com)
还有有一篇更专业的讲解文章
彻底搞懂移动Web开发中的viewport与跨屏适配 - 知乎 (zhihu.com)
参考资料
rem学习使用_为什么rem跟html走而不是body-CSDN博客
如何更愉快地使用rem —— 别说你懂CSS相对单位 - 知乎 (zhihu.com)
