Vue.js 移動端適配之 vw 解決方案

52admln發表於2018-09-03
Vue.js

1. 安裝並配置PostCss外掛

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

還需要安裝 cssnano-preset-advanced

npm i cssnano-preset-advanced --save-dev

2. 對 PostCss 進行配置

找到在根目錄中的.postcssrc.js，對PostCSS外掛進行配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
      viewportHeight: 1334, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
      viewportUnit: `vw`, // 指定需要轉換成的視窗單位，建議使用vw
      selectorBlackList: [`.ignore`, `.hairlines`], // 指定不轉換為視窗單位的類，可以自定義，可以無限新增,建議定義一至兩個通用的類名
      minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值
      mediaQuery: false // 允許在媒體查詢中轉換`px`
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同樣具有autoprefixer，保留一個
      "postcss-zindex": false
    }
  }
}

3. 引入viewport-units-buggyfill解決相容問題

在 index.html 中引入js

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
  window.onload = function () { 
    window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
  }
</script>

4. 遇到的問題及解決方案

  1. img圖片不顯示

全域性引入CSS樣式

img { content: normal !important; }
  1. 與第三方UI庫相容問題

我這裡使用了 Element 的 Mint-UI，在編譯的過程中會出現這個錯誤：

 warning  in ./node_modules/mint-ui/lib/style.css

(Emitted value instead of an instance of Error) postcss-viewport-units: /Users/Wyj/Workspace/imglive/wx/node_modules/mint-ui/lib/style.css:267:1: `.mint-cell-allow-right::after` already has a `content` property, give up to overwrite it.

 @ ./node_modules/mint-ui/lib/style.css 4:14-118 13:3-17:5 14:22-126
 @ ./src/plugins/mint-ui/index.js
 @ ./src/plugins/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

可通過自行修改 postcss-px-to-viewport

在node_modules中找到 postcss-px-to-viewport ，開啟index.js
新增對exclude選項的處理

module.exports = postcss.plugin(`postcss-px-to-viewport`, function (options) {

  var opts = objectAssign({}, defaults, options);
  var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);

  return function (css) {

    css.walkDecls(function (decl, i) {
      if (options.exclude) {  // 新增對exclude選項的處理
        if (Object.prototype.toString.call(options.exclude) !== `[object RegExp]`) {
          throw new Error(`options.exclude should be RegExp!`)
        }
        if (decl.source.input.file.match(options.exclude) !== null) return;
      }
      // This should be the fastest test and will remove most declarations
      if (decl.value.indexOf(`px`) === -1) return;

      if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

      decl.value = decl.value.replace(pxRegex, pxReplace);
    });

    if (opts.mediaQuery) {
      css.walkAtRules(`media`, function (rule) {
        if (rule.params.indexOf(`px`) === -1) return;
        rule.params = rule.params.replace(pxRegex, pxReplace);
      });
    }

  };
});

然後在 .postcssrc.js 新增 postcss-px-to-viewport 的 exclude 選項

"postcss-px-to-viewport": {
  viewportWidth: 750,
  viewportHeight: 1334,
  unitPrecision: 3,
  viewportUnit: `vw`,
  selectorBlackList: [`.ignore`, `.hairlines`],
  minPixelValue: 1,
  mediaQuery: false,
  exclude: /(/|\)(node_modules)(/|\)/
},

或者使用改良版的 postcss-px-to-viewport-opt

npm install postcss-px-to-viewport-opt -S

然後在 .postcssrc.js 配置 postcss-px-to-viewport-opt

`postcss-px-to-viewport-opt`: {
  viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
  viewportHeight: 1334, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置
  unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
  viewportUnit: `vw`, // 指定需要轉換成的視窗單位，建議使用vw
  selectorBlackList: [`.ignore`, `.hairlines`], // 指定不轉換為視窗單位的類，可以自定義，可以無限新增,建議定義一至兩個通用的類名
  minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值
  mediaQuery: false, // 允許在媒體查詢中轉換`px`
  exclude: /(/|\)(node_modules)(/|\)/
},

5. 參考資料

Vue+ts下的移動端vw適配（第三方庫css問題）
再聊移動端頁面的適配
如何在Vue專案中使用vw實現移動端適配

原文地址：Vue.js 移動端適配之 vw 解決方案

相關文章