移動端 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

---