移动端 750px UI 设计稿

750px UI 设计稿

App 小程序 H5

rem & vh/vw

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

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

why

1. 750px 是 iPhone6 的物理像素，即屏幕分辨率;
2. 移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;
3. 通过动态的获取设备独立像素，然后除以设计稿的宽度，然后设置 rem，来动态自适应字体大小;
4. 为什么要乘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);
})();

devicePixelRatio

refs

https://lulua87.github.io/2017/08/29/How-does-FE-implement-Mockup/

https://blog.csdn.net/Honeymao/article/details/76795089

https://zhuanlan.zhihu.com/p/30044054

---

CSS Units

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

https://www.w3schools.com/cssref/css_units.asp

https://dev.to/fullstack_to/units-in-css-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-53l0

https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m

---