vue-cli配置移動端自適應flexible.js

第一部分：項目中引入lib-flexible

一、項目中安裝lib-flexible

npm install lib-flexible --save-dev

二、在項目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

三、在項目根目錄的index.html 頭部加入手機端適配的meta

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

通過以上，就完成了在vue項目使用lib-flexible來解決移動端適配了。

lib-flexible會自動在html的head中添加一個meta name="viewport"的標簽，同時會自動設置html的font-size為屏幕寬度除以10，也就是1rem等於html根節點的font-size。假如設計稿的寬度是750px，此時1rem應該等於75px。假如量的某個元素的寬度是150px，那么在css里面定義這個元素的寬度就是 width: 2rem。

注意：

1、因為html的font-size是根據屏幕寬度除以10計算出來的，所以我們需要設置頁面的最大寬度是10rem。
2、如果每次從設計稿量出來的尺寸都手動去計算一下rem，就會導致我們效率比較慢，還有可能會計算錯誤，所以我們可以使用px2rem-loader自動將css中的px轉成rem

 

 

實際開發中，我們通過設計稿得到的值單位是 px，所以要將 px 轉換成 rem 再寫進樣式中。
將 px 轉換成 rem 我們將使用 px2rem 這個工具，它有 webpack 的 loader：px2rem-loader

第二部分：使用px2rem-loader自動將css中的px轉換成rem

一、安裝px2rem-loader

npm install px2rem-loader --save-dev

二、配置px2rem-loader

    1.打開build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代碼

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
}

    2.修改generateLoaders方法中的loaders

// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

然后重新npm run dev，打開控制台可以看到代碼中的px已經被轉成了rem

解析：

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式文件 loader 最終是都是由 build/utils.js 里的一個方法生成的。

我們只需在 cssLoader 后再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素，結合 lib-flexible 的方案，
我們將 px2remLoader 的 options.remUnit 設置成設計稿寬度的 1/10，這里我們假設設計稿寬為 750px。
修改配置后需要重啟，然后我們在組件中寫單位直接寫 px，設計稿量多少就可以寫多少了，舒服多了

 

注意：

    1.此方法只能將.vue文件style標簽中的px轉成rem，不能將script標簽和元素style里面定義的px轉成rem

    2.如果在.vue文件style中的某一行代碼不希望被轉成rem，只要在后面寫上注釋 /* no*/就可以了

 

 

 

 

 

 

.