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

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

　　1、UI設計尺寸定基數

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

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

      2、使用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有些變化，主要有三個方面須要注意：

　　一、直接寫px，編譯後會直接轉化成rem —- 除開下面兩種狀況，其餘長度用這個

　　二、在px後面添加/no/，不會轉化px，會原樣輸出。 — 通常border需用這個

　　三、在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
        })
      })
    }

 　　1、卸載postcss-px2rem（若是有）

　　

npm  uninstall postcss-px2rem --save-dev

　　2、安裝postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

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

　　

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

　　4、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的插件或者自動插件

　　　一、手動插件px to rem

　　

　　在Vscode插件px to rem的擴展配置設置中，若是設計圖是750px確保這裏是75。使用快捷鍵ALT+Z能夠轉化爲rem

　　二、自動插件px2rem