flexible.js-移動端H5頁面適配應用

WinMin發表於2018-09-28
FlexJSH5

前端頁面適配有兩大方向：一是佈局適配，可以使PC、手機、平板共用一份程式碼，實現方法有css 媒體查詢、css 彈性盒子佈局、 css grid佈局等。二是高清適配，面對的是移動開發中裝置不同解析度和不同尺寸，最大限度還原設計稿效果。

flexible.js是高清適配的一種方法，它通過javascript根據不同裝置的dpr值和裝置寬度為html動態設定font-size，其他元素使用rem做單位。推薦先閱讀下面兩篇文章，瞭解相關概念和實現原理：

相關概念

flexible原理

基本的用法詳見倉庫, 在實際運用中碰到幾個問題：

  • 字型大小，這個問題要根據設計師的要求具體分析。如果要求是在所以裝置上字型都統一大小就需要以下做法：
        .title{
            font-size: 19px;
            text-align: center;
        }
        [data-dpr="2"] .title {
            font-size: 37.5px;
        }

複製程式碼

這樣在dpr=1和dpr=2的裝置上字型大小是統一的。 但是更多情況下字型大小是和設計稿的其他元素相關聯的，需要和整個頁面一起縮放，這時直接使用rem作單位就行了。

        .title{
            font-size: 0.5rem;/* 37.5px */
            text-align: center;
        }
複製程式碼
  • 單位換算，預設1rem = 75px，我們從設計稿得到的尺寸是px為單位的，如果要換算成rem作單位需要依賴編譯器外掛，而且會出現小數的情況。所以可以自定義flexible.js檔案，使1rem = 100px, 這樣只需心算一下就能換算單位了。詳見倉庫
  • 第三方外掛，上述的基本示例中html裡並沒有設定而是通過flexible.js自動新增的，當dpr=1時縮放比為1，當dpr=2時縮放比為0.5。由於一般第三方外掛的尺寸都是依據dpr=1確定大小使用px為單位，所以為了相容，需要為頁面顯式設定viewport。詳見倉庫
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製程式碼
  • 自動編譯

px2rem-loader : webpack載入器，將px換算rem

gulp-px3rem : gulp外掛，將px換算rem

相關文章