移动端 750px UI 设计稿

750px UI 设计稿

App 小程序 H5

rem & vh/vw

在移动端页面开发中，UI 一般会用750px（iphone 6）来出设计稿;

然后要求能够做到页面是自适应屏幕的，这种情况下就可以用 rem或者 vh/vw 等相对单位来做适配;

why

750px 是 iPhone6 的物理像素，即屏幕分辨率;
移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;
通过动态的获取设备独立像素，然后除以设计稿的宽度，然后设置 rem，来动态自适应字体大小;
为什么要乘100，放大一些，便于计算，只需要将设计稿量出来的 px, 小数点向左移2位，即可转换成 rem;
( 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);
})();