移动端适配问题，选vw还是rem？还是其他方式？

最近在学习前端页面的适配问题，问了身边几个前端岗位工作的的朋友移动端的适配方式，结果每个人都给出了不一样的适配方式，前段时间正火热的rem适配方式，现在已经慢慢vw赶上了，感叹前端技术变化真是快。

---

接下来总结一下最近的学习：

移动端适配是选vw还是rem？其实并不是所有场景下的移动端页面都适合的，采用vw或rem的方案的本质是布局等比例的缩放，这类方案可以保证页面各元素之间位置尺寸的比例关系，并让元素可以清晰地展现。但是在文本内容较多的页面时候，还是比较推荐直接使用px结合flex来进行搭建。

vw可以完全替代rem吗？

答案是否定的，因为单纯使用vw进行布局不能限制布局的宽度，对于有这个需求的场景至少还是需要将vw和rem混用来处理边界情况。

rem方案有哪些适配方法

不缩放viewport
缩放viewport

vw方案

vw + rem，以京东首页作为案例来说，京东的移动端首页采用了vw+rem的布局方式，元素布局上依然使用rem单位，没有缩放viewport, html元素的font-size则使用vw + px fallback的形式，并且使用media query来限制布局宽度。

现在有一个最新的解决方案
就是基本不用js去进行页面的缩放，只通过在页面中设置

/* 基于UI width=750px DPR=2的页面 */
html{
    font-size:calc(100vw/7.5);
}

来进行缩放，对于不兼容的机子，可以通过引入js解决。

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px' // 7.5 是750宽度的设计稿