移動端頁面完美適配解決方案（現階段）

最近在寫一些移動端的頁面，總會遇到一些適配問題，之前呢也不知道爲何，老是習慣用rem來作單位，但是總有問題，寫起來至關難受，因而我坐不住了，必定要去看看有沒有更好的方法。 而後就有了已下心得。 先吐槽一句，rem不知道是誰帶起來的，坑了好多人。 想必作前端的確定都知道vw，vh這樣的相對單位吧。它是相對於屏幕的寬度來的，具體能夠看看這篇文章 接下來就是如何寫項目配置，首先安裝postcss-px-to-viewport這個插件，而後在項目根目錄建立（若是有就不用）.postcssrc.js文件 具體配置以下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      // viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: [
        '.ignore',
        '.weui-dialog',
        '.swiper',
        '.weui-toast',
        '.weui-loading',
        '.weui-icon_toast'
      ], // 這是須要忽略轉換的css名稱，爲了搭配一些第三方ui庫使用
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}
複製代碼

viewportWidth: 750這個配置指的是ui給你的移動端頁面是750px寬，這樣對應的話，你的css（less）文件裏寫單位仍是寫原來的px就行，好比藍湖上某張圖片的寬高是75px*75px，那麼你在css裏也直接寫就ok。

.img{
  width: 75px;
  height: 75px;
}
// 最後會編譯爲
.img{
  width: 10vw;
  height: 10vw;
}
複製代碼

書寫上和與ui的交流上徹底不用人爲手動轉化，是否是有種恍然大悟的感受，寫太小程序就能明白，小程序的rpx單位其實也同樣的原理。 最後想說，目前來看，我以爲flex佈局+vw是解決移動端適配最完美的解決方案。