前言

• 淘寶 lib-flexible + postcss-pxtorem 方案
  此方案的地址
• lib-flexible+postcss-pxtorem是解決移動(dòng)端布局的主流
• lib-flexible是阿里手淘系開源的一個(gè)庫，用于設(shè)置font-size，同時(shí)處理一些窗口縮放的問題

不足：

• 兩個(gè)插件需要配套使用，而且rootValue設(shè)置的值不好理解
• rem是相對(duì)于html元素字體單位的一個(gè)相對(duì)單位，從本質(zhì)上來說，它屬于一個(gè)字體單位，用字體單位來布局，并不是太合適
• 瀏覽器不斷升級(jí)，絕大部分支持vw

使用vw方案

官方API地址

• 將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
• 如果你的樣式需要做根據(jù)視口大小來調(diào)整寬度，這個(gè)腳本可以將你CSS中的px單位轉(zhuǎn)化為vw，1vw等于1/100視口寬度。

1. 安裝

npm install postcss-px-to-viewport --save-dev

2. 添加配置文件

• [方式一]：根目錄下添加.postcssrc.js文件

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

• [方式二]：根目錄下添加 postcss.config.js 文件
  使用PostCss配置文件時(shí)
  在postcss.config.js添加如下配置

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-px-to-viewport': {
      unitToConvert: "px", // 要轉(zhuǎn)化的單位
      viewportWidth: 750, // UI設(shè)計(jì)稿的寬度
      unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
      propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
      viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
      fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
      selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類名，
      minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
      mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
      replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
      exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
      landscape: false // 是否處理橫屏情況
    }
  }
}

注意：

• propList: 當(dāng)有些屬性的單位我們不希望轉(zhuǎn)換的時(shí)候，可以添加在數(shù)組后面，并在前面加上!號(hào)，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進(jìn)行轉(zhuǎn)化，除了letter-spacing的
• selectorBlackList：轉(zhuǎn)換的黑名單，在黑名單里面的我們可以寫入字符串，只要類名包含有這個(gè)字符串，就不會(huì)被匹配。
  比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，都不會(huì)被轉(zhuǎn)換

搭配vant使用

如果vant內(nèi)自帶配置指向375，我們?cè)O(shè)計(jì)稿750，則需要二次修改 .postcssrc.js 配置文件

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes('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
      }
    }
  }
}