天天看点

如何使用 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;