移动端 750px UI设计稿css rem转换

rem & vh/vw

在移动端页面开发中，UI 一般会用750px（iphone 6）来出设计稿;然后要求能够做到页面是自适应屏幕的，这种情况下就可以用 rem或者 vh/vw 等相对单位来做适配，但对应css用rem怎么转换。

why

1. 750px 是 iPhone6 的物理像素，即屏幕分辨率;

2. 移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;

3. 通过动态的获取设备独立像素，然后除以设计稿的宽度，然后设置 rem，来动态自适应字体大小;

4. 为什么要乘100，放大一些，便于计算，只需要将设计稿量出来的 px, 小数点向左移2位，即可转换成 rem; 比如设计搞里 按钮宽220px,在css里就是2.20rem
   ( Notes: 375 / 750是0.5，浏览器默认最小字体为12px)

(() => {
　 const autoReponsiveFontSize = () => {
　　 const designWidth = 750;        const rem2px = 100;
　　 document.documentElement.style.fontsize = ((window.innerWidth / designWidth) * rem2px) + 'px';
　　// iPhone6: (375 / 750) * 100 + 'px';　  }
　autoReponsiveFontSize();
　window.addEventListener('resize', autoReponsiveFontSize, false);
})();

devicePixelRatio