前言:前端頁面的布局(各元素的間距),一般會有PSD文件,有精確的px單位,而px與rem要如何轉換才能高度還原設計圖呢
一般情況下,設計稿的寬高為:
750*1334px,而大部分流行手機的屏幕尺寸為:
375*667px,正好是一倍的關系。
手機瀏覽器的根字體大小是16px,所以這里的baseSize設為32最好,因為正好是16的2倍,所以設計稿里的數值為多少px,代碼就直接寫多少px就行了。
高度還原設計圖,提高工作效率,是皆大歡喜的。
當然,前提要安裝能將我們寫的px轉換為rem的插件,可參考
https://www.jianshu.com/p/dcba77b3f5a2
如圖所示,不同手機屏幕尺寸適配后的效果
