前言
相信大多數移動端前端開發者都是用過 lib-flexible來作為移動端適配的解決方案。lib-flexible是淘寶項目組開發出來的一個小插件，屬於開源項目，可以在各類項目中引入並使用，為移動端的開發者帶來了無窮的便利。
但是，有人提出為什么在屏幕尺寸超出一定分辨率后便不再適配？ 今天針對該問題來嘗試給出解決方案。
關於lib-flexible
1. 解讀
lib-flexible會自動在html的head中添加一個 meta name="viewport"的標簽，同時會自動設置html的font-size為屏幕寬度除以10，也就是1rem等於html根節點的font-size。假如設計稿的寬度是750px，此時1rem應該等於75px。假如某個元素的寬度是150px，那么在css里面定義這個元素的寬度就是 width: 2rem。但是當分辨率大於某個特定值時，它便不再生效。
2. 移動端適配步驟
一般而言， lib-flexible並不獨立出現，而是搭配 px2rem-loader一起做適配方案，目的是自動將css中的px轉換成rem。以下為它在vue中的使用。
2.1 安裝 lib-flexible
npm install lib-flexible --save-dev
2.2 引入 lib-flexible
在 main.js中引入lib-flexible
// px2rem 自適應
import 'lib-flexible'
2.3 安裝 px2rem-loader
npm install px2rem-loader --save-dev
2.4 配置 px2rem-loader
分兩種情況：
- vue-cli 2.x
- vue-cli 3.x
2.4.1 第1種
如果是2.x版本。
1. 在 build/utils.js中，找到 exports.cssLoaders，作出如下修改：
const px2remLoader = { loader: 'px2rem-loader', options: { remUint: 75 // 以設計稿750為例， 750 / 10 = 75 }}
2. 繼續找到 generateLoaders中的 loaders配置，作出如下配置：
// 注釋掉這一行// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]// 修改為const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) { loaders.push(postcssLoader)}
3. 重新 npm run dev，完成。
2.4.2 第2種
如果是3.x版本。由於3.x版本需要自己配置，在項目根目錄新建文件 vue.config.js，然后如下配置：
module.exports = { css: { loaderOptions: { css: {}, postcss: {plugins: [require('postcss-px2rem')({// 以設計稿750為例， 750 / 10 = 75 remUnit: 75 }),] }}},};
然后，重新 npm run dev，完成。
3. 大屏怎么辦？
正常情況下，如果是教程，那么到此就結束了。可本文中心是如何在大屏中正常使用 lib-flexible。 例如我們屏幕尺寸要做以 3840x2160為設計稿的適配，那么我們的remUnit的值則改為384。然后呢？重啟項目，發現……咦？布局全部亂掉！經過排查，自己的代碼基本上不會導致該問題的出現，那么只能是源碼在作怪了。重點來了。
3.1 找到源碼
打開 ./node_modules/lib-flexible/flexible.js，找到如下片段源碼：
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}
從此段源碼中我們不難看出，當屏幕寬度除以dpr（dpr是一個倍數，此處一般為1）大於540這個特定值的時候，那么就不再進行適配了。那么我們如何解決這個問題呢？
3.2 修改源碼
在上述源碼中，進行修改。例如我要適配的大屏幕尺寸是基於3840的設計稿，而要求最小范圍是1980，最大為5760，那么我們要修改的則變為：
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr < 1980) { width = 1980 * dpr; } else if (width / dpr > 5760) { width = 5760 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}
3.3 重啟，完成
修改完成后，重啟項目，則會適配到相應的尺寸。此外還有一個提示，當脫離掉 node_modules重新 npm install項目依賴時還是需要重新修改一遍的，千萬別忘了！