移動端布局之 postcss-px-to-viewport（兼容 vant）

第一種方案

已經背棄用的一種，需要了解一下，lib-flexible+postcss-pxtorem;lib-flexible 是阿里的一個開源的庫，用於設置 font-size,同時可以對窗口的縮放進行處理，但是由於 rem 是相對於 html 元素字體的一個相對的單位，根本上來說是根據字體大小實現布局，總體來說不太適合;

第二種方案

viewport，postcss-px-to-viewport，就可以解決上面說的問題，這個插件主要是將 px 轉換為視口單位 vw，vw 是一種百分比單位，100vw 就等於 100%，就是我們的 window.innerWidth，下面是具體的步驟

vue create myapp ;
npm install postcss-px-to-viewport -D

 

在創建腳手架的時候需要特別注意，需要選擇 css Pre-processors

2 在項目根目錄下添加.postcssrc.js 文件，或者是 postcssrc.js，這個好像有 bug，建議沒效果的時候可以去更改一下

3 添加配置

module.exports = {
  plugins: {
    autoprefixer: {}, // 用來給不同的瀏覽器自動添加相應前綴，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要轉化的單位
      viewportWidth: 750, // UI設計稿的寬度
      unitPrecision: 3, // 轉換后的精度，即小數點位數
      propList: ["*"], // 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換
      viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vw
      fontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位，默認vw
      selectorBlackList: ["wrap"], // 指定不轉換為視窗單位的類名，
      minPixelValue: 1, // 默認值1，小於或等於1px則不進行轉換
      mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認false
      replace: true, // 是否轉換后直接更換屬性值
      exclude: [/node_modules/], // 設置忽略文件，用正則做目錄名匹配
      landscape: false, // 是否處理橫屏情況
    },
  },
};

4 重新的區運行項目,不然沒有效果,應為我們改變了配置文件

5 在創建好的項目中寫一段 css 代碼后查看，如果發現單位變成 vw 證明此時成功了，否則就是沒有

需要注重的配置

1.ropList: 當有些屬性的單位我們不希望轉換的時候，可以添加在數組后面，並在前面加上!號，如 propList: ["*","!letter-spacing"],這表示：所有 css 屬性的屬性的單位都進行轉化，除了 letter-spacing 的

2.selectorBlackList：轉換的黑名單，在黑名單里面的我們可以寫入字符串，只要類名包含有這個字符串，就不會被匹配。比如 selectorBlackList: ['wrap'],它表示形如 wrap,my-wrap,wrapper 這樣的類名的單位，都不會被轉換

關於兼容第三方的庫

1.在引入第三方的庫時，在上面配置的 exclude 去掉，表示全部內容進行一個 vw 轉換，此時我們會發現我們的視圖發生了一定程度的擠壓，主要拿 vant 來說，打開 vant 的官網你會發現 vant 在適配時適配的是 375px,而我們的是 750，最最主要的是我們不可能要求 ui 去給我們重新區做 ui 圖，所以我們需要在我們的適配的配置文件中去搞一下了，即更改我們的配置文件

2 更改后的配置文件

const path = require("path");

module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(
    path.join("node_modules", "vant")
  )
    ? 375
    : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false,
      },
    },
  };
};

3 重新運行，完美適配