[New]Vue項目使用vw實現移動端適配教程

2018年1月25日 11:58:01 最新的大漠老師移動端適配方案,
使用這套方案能夠取代flexible.js
首先建議讀者先去學習大漠老師的這篇文章,看完能有大大的收穫

如何在Vue項目中使用vw實現移動端適配

正文開始

使用vue-cli新建項目

vue init webpack vue-demo
cd vue-demo
npm run dev

安裝依賴

• 複製如下代碼：

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

• 複製進行 postcssrc.js 配置

.postcssrc.js配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

各插件的功能：

---

postcss-px-to-viewport : 將項目中的px轉化爲vw

"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` 
}

• 容器適配，能夠使用vw
• 文本的適配，能夠使用vw
• 大於1px的邊框、圓角、陰影均可以使用vw
• 內距和外距，能夠使用vw

postcss-px-to-viewport文檔

---

postcss-write-svg 實現Retina屏1像素邊框
首先記得在heade頭加入
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

實例不成功，換插件實現吧

方式一:

方式二:

---

最重要的 降級處理
使用 Viewport Units Buggyfill 插件
在vue項目的index.html文件head標籤添加引用
``<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>
``
在Index.html文件body標籤後添加如下代碼

<script>
  // vw兼容性處理viewport-units-buggyfill
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
      //如下代碼用戶測試
      // var winDPI = window.devicePixelRatio;
      // var uAgent = window.navigator.userAgent;
      // var screenHeight = window.screen.height;
      // var screenWidth = window.screen.width;
      // var winWidth = window.innerWidth;
      // var winHeight = window.innerHeight;
      // console.log("Windows DPI:" + winDPI + ";\ruAgent:" + uAgent + ";\rScreen Width:" +
      //   screenWidth + ";\rScreen Height:" + screenHeight + ";\rWindow Width:" + winWidth +
      //   ";\rWindow Height:" + winHeight)
    }
  </script>

最後作個對img兼容處理，在全局添加(在main.js 用 Import '@/common/index.css')

img {
  content: normal !important;
}

這樣就能夠用vw進行移動端項目開發啦!