移動端佈局方案彙總&&原理解析

_zhongmeizhi_發表於2019-03-21

阿里flexible佈局 - 版本1.x

該佈局於 2017年8月9日被2.0版本取代

實現原理 假設（UI稿750px寬）

  • 設定viewport的 scale = 1/window.devicePixelRatio
  • 將螢幕分成10份，font-size = 實際螢幕寬度 / 10;
  • 開發時直接填寫(設計稿DOM寬度)px
  • 利用 px2rem外掛 轉換為 -> 實際rem

阿里flexible佈局 - 版本2.x

flexible 2.x： github.com/amfe/lib-fl…

實現原理

  • 利用viewport的理想視口，刪除1.x版本的scale縮放
  • 其他依舊和1.x版本一樣

網易佈局

個人很喜歡的佈局方案

實現原理 假設（UI稿750px寬）

  • 如低版本瀏覽器:
    • UI稿以font-size = 100px;作為參照，總寬度 = 7.5rem
    • 設計稿DOM對應px / 100 = 實際rem（計算起來很方便）
    • 其他螢幕按螢幕寬度百分比 縮放 font-size的值
  • 若高版本瀏覽器:
    • 1px/750px ≈ 0.1333333%
    • 按照低版本邏輯：font-size = 0.1333333% * 100 = 13.33333vw

webpack外掛postcss-px-to-viewport

顧名思義，將px轉換為vw、vh、vmin、vmax

{
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 3,
    viewportUnit: 'vw',
    selectorBlackList: ['.ignore', '.hairlines'],
    minPixelValue： 1,
    mediaQuery: false
}
複製程式碼

End

文章分享同步於： github.com/zhongmeizhi…

相關文章