设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。
首先设计稿是基于 iPhone6 设计的也就是宽度 750px。（先不考虑dpr的问题下面会说）然后设置 1rem 等于 100px（ HTML font-size 为 100px），相当于 7.5rem = 100%宽度 = 设备的宽度。
750 / 7.5 = 100
由于是基于 7.5rem 开发。iPhone6 的物理像素是 375px（dpr是2.0），如果此时还想让 7.5rem 等于设备宽度只能调整 1rem 对应 font-size 的比例， 375 / 7.5 = 50 让 1rem=50px 就可以实现。
如果想让 iPhone5 适配只需要 1rem = （320 / 7.5） = 42.66px 就可以实现 iPhone5 的适配，这个方法可以适配市面上绝大多数的移动端设备。
只需要加下面这句话可以实现我上述效果。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';动态计算并设置不同尺寸 html 的 font-size 属性(大白话：动态计算出来不同手机页面的 html 的font-size)。动态 rem 方案既能实现页面级整体缩放，又能个性化控制某些元素不缩放。