前言

  相信大多數移動端前端開發者都是用過 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專案依賴時還是需要重新修改一遍的，千萬別忘了！

地址：https://cloud.tencent.com/developer/article/1529755