天天看點

如何使用 rem 和 px 函數适配各種螢幕

算法:

如何使用 rem 和 px 函數适配各種螢幕
  • Wp 為頁面有效寬度,Hp 為頁面有效高度
  • 頁面左右居中,上下居中,四周留白即可
  • 然後在 head 裡用 JS 設定 1rem = Wp / 100(下文中會用到)
如何使用 rem 和 px 函數适配各種螢幕
  • 假設某 div 在設計稿中長 100px,設計稿寬度 1920px,
  • 那麼該 div 在頁面中長為 100/1920 X 100rem
  • 最後可以寫一個 px() 函數來計算 100px 對應的 rem
  • export const px = (n) => n / 1920 * (window as any).pageWidth;