1. 程式人生 > >淘寶、網易移動端 px 轉換 rem 原理,Vue-cli 實現 px 轉換rem

淘寶、網易移動端 px 轉換 rem 原理,Vue-cli 實現 px 轉換rem

   在過去的一段時間裡面一直在使用Vue配合 lib-flexiblepx2rem-loader配合做移動端的網頁適配。秉著求知的思想,今天決定對他的原理進行分析。目前網上比較主流使用的就是淘寶方案和網易的解決方案,所以今天我就從這兩方面入手深度瞭解這兩個方案。本著網際網路分享的精神我會將我所理解的內容分享給大家。Remember me. my name is '鉛筆畫不出的黑白'

   我在網上找到了一些資料大家也可以去閱讀下 從網易與淘寶的font-size思考前端設計稿與工作流移動web資源整理。但是在讀到單位換算時我有點蒙圈,下面我就講我自己的理解說給大家聽聽,也歡迎大家留言探討不同的解決方案。

網易轉換rem分析

   首先網易的設計稿是基於iPhone5設計的也就是寬度640px。(先不考慮dpr的問題下面會說)然後設定1rem等於100px( HTML font-size為100px),相當於6.4rem = 100%寬度 = 裝置的寬度。

   由於是基於6.4rem開發。iPhone5 的物理畫素是320px(dpr是2.0),如果此時還想讓6.4rem等於裝置寬度只能調整1rem對應font-size的比例, 320 / 6.4 = 50 讓1rem=50px就可以實現。如果想讓 iPhone6 適配只需要 1rem = (375 / 6.4) = 58.59375px 就可以實現iPhone6的適配,這個方法可以適配市面上絕大多數的移動端裝置。

   只需要加下面這句話可以實現我上述效果。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

淘寶轉換rem分析

   這次咱們還是拿iPhone5(640px)的設計稿舉例,淘寶的思想是無論當前頁面多寬,讓10rem = 頁面寬度 = 100%,所以1rem = 64px 然後通過dpr設定縮放整個頁面,以達到高保真的效果。

  iPhone5的寬度是640px,頁面最終完成效果也是640px,iPhone的dpr是2,所以設定 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

就可以了適配iPhone5了。當然這些東西lib-flexible都幫我們做好了。我只不過說一下,讓好奇的小夥伴知道原理。

Vue-cli配合lib-flexible 實現移動端自適應佈局

cnpm intall lib-flexible  // 安裝lib-flexible
import 'lib-flexible'     // 在 src\main.js 中引入 lib-flexible

   完成上面程式碼就相當於實現了rem動態計算了,如果此時在iPhone5上有一個元素是寬150px,高是200px,想計算rem寬是 150/64 = 2.34375rem,高是200/64 = 3.125rem。

   至於dpr的縮放問題,那個就不用關心了。lib-flexible已經幫你做好了。你只需要關心dpr轉換rem即可。

使用 px2rem-loader 自動將px轉換rem

cnpm intall px2rem-loader  // 安裝px2rem-loader

  在 build\utils.js 修改成下面的程式碼。

  // 在 cssLoaders 方法內新增下列程式碼 
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64 //設計稿寬度/10
    }
  // 將 cssLoaders 方法內的generateLoaders的方法內的 loaders 變數新增 px2remLoader 
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader, lessLoader ] : [cssLoader, px2remLoader, lessLoader ]

後語:寫這篇文章已經計劃很久了,可是一直沒有時間寫。寫完後發現最近網上很流行vm配合rem佈局方案,並且淘寶也升級了佈局方案,改成了定位方式的寫法。我近期深究下vm的解決方案。到時候分享一篇文章給大家。