使用lib-flexible.js適配移動端UI設計750px設計圖

   最近在和設計溝通關於設計圖尺寸大小和前端實際頁面尺寸大小不一致的情況，我們的UI設計是使用的iPone6的，（iphone6:    375px*667px  實際像素：750px*1334px）如果按照她給的尺寸直接復制那么你的頁面尺寸就是一個放大鏡，正常人都知道那是不對的，我在做的時候有兩種解決辦法：

　　一、UI設計尺寸定基數

　　　　可以和UI溝通在給你的標記尺寸大小時候，讓她基於一個數值，一般是16px。給你標注的時候選擇保留兩個小數，給你標注成px或者rem。

　　　　開發者這時候需要配置開發者工具了，我使用的是 Visual Studio Code，需要安裝插件cssrem,安裝完成時候再次重啟，可以看到px和rem的轉換。

      二、使用lib-flexible適配UI尺寸

　　　　使用lib-flexible.js需要在開始引入可以npm引入或者html引入。

　　　　使用lib-flexible.js需要注釋：html中的

<meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />

  　　　　html引入：

　　　　　　引入地址：https://github.com/821945617/tools下載lib-flexible.js

　　　　　　使用這種引入方式需要計算px與rem的兌換公式，如果一個div的寬度在iPone6設計稿上面為200px，那么750/10 = 75 ，實際rem就是200/75 = 2.666667rem,即這個公式是：

　　　　　　　　需轉換的px值 / 設計稿寬度px值 * 10     

　　　　npm引入

npm install lib-flexible --save

import "lib-flexible" // 在main.js引入

　　　　　　需要安裝px轉rem插件安裝px2rem-loader自動將px轉換為rem 

npm install px2rem-loader --save-dev

　　　　接下來就是配置px2rem

　　　　   在build/uitils.js中添加配置

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 2 // 在css-loader前引用的loader的數目，默認為0，如果不加,那么@important的外部文件不能正常轉換，如果還不行，試着調大字數
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 設計稿的1/10
    }
  }

　　　在下面的generateLoaders方法配置：

  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

安裝px2rem后使用px有些變化，主要有三個方面需要注意：

　　1、直接寫px，編譯后會直接轉化成rem —- 除開下面兩種情況，其他長度用這個

　　2、在px后面添加/no/，不會轉化px，會原樣輸出。 — 一般border需用這個

　　3、在px后面添加/px/,會根據dpr的不同，生成三套代碼。—- 一般字體需用這個

　　示例代碼

　　

.div{
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

這樣基本配置就完成了，重啟項目就可以使用lib-flexible+rem編寫移動端頁面了

　　注意：以下是使用了UI框架字體縮小配置

　　　　　　這里有個問題，如果你使用了UI框架，引入框架的樣式會字體很小，這時候就需要手動轉px變rem了。

　　　　首先刪除px2remLoader 修改配置 在build/uitils.js中generateLoaders方法配置px2remLoader刪除

　　　　

// const px2remLoader = {

// loader: 'px2rem-loader',

// options: {

// emUnit: 75 // 設計稿的1/10

// }

// }

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

 　　一、卸載postcss-px2rem（如果有）

　　

npm  uninstall postcss-px2rem --save-dev

　　二、安裝postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

　　三、正確的配置位置是項目根目錄下的postcss.config.js（或者是postcss.js）文件，如果你的項目沒有生成這個獨立文件，就需要在你的package.json里設置。

　　

module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}

　　四、html添加<meta></meta>

　　　　這時仍需要自適應適配meta

　　　　　　<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

　　編輯器

　　這里你可以使用手動轉rem的插件或者自動插件

　　　1、手動插件px to rem

　　

　　在Vscode插件px to rem的擴展配置設置中，如果設計圖是750px確保這里是75。使用快捷鍵ALT+Z可以轉化為rem

　　2、自動插件px2rem