vw结合rem实现移动端适配 该方案有一个很大的问题，完全释放权限到vw，失去了最大最小的UI控制 比较合理的方案是设定最大UI兼容尺寸以及最小UI兼容尺寸，vw在中间范围进行动态调整

极简vw-rem方案

背景

为了方便从设计稿还原尺寸，假设我们设置1rem = 100px

但是这样有个问题，px并不会随着视窗尺寸的改变自适应，所以我们要使用一个可以跟随视窗动态变化的单位进行适配，vw兼容性不错，很合适

适配计算

以iPhone SE 750 device pixels, dpr=2，设计稿375px为例：

clientWidth = 750 / 2 = 375px
1vw = 375px / 100 = 3.75px
100px = 100px / 3.75px = 26.67vw

# 若UI 750PX
100px = 100px * 2 / 3.75px = 53.33vw

则设置document.documentElement.style.fontSize = '26.67vw'，按照设计稿还原为rem即可

速算

1. 640dp, dpr2, 320UI: 31.25vw

vm-rem & UI展示控制

通过动态变更根节点font-size，以实现最大UI兼容尺寸以及最小UI兼容尺寸，vw在中间范围进行动态调整

vw-rem.scss

@import 'vw-rem.scss'

$baseFontSize: 37.5Px !default;
$designSize: 375Px !default;
$bodyMinWidth: 320Px !default;
$bodyMaxWidth: 540Px !default;

html{
  font-size: calc($baseFontSize / $designSize) * 100vw;
  @media screen and (max-width: $bodyMinWidth) {
    font-size: calc($baseFontSize * $bodyMinWidth / $designSize);
  }
  @media screen and (min-width: $bodyMaxWidth) {
    font-size: calc($baseFontSize * $bodyMaxWidth / $designSize);
  }
}

vw-rem

packages/apps/vw-rem