移動端Vue項目適配處理

在移動端項目中的字體在隨瀏覽端的窗口尺寸改變（響應式），在Vue項目中咱們能夠用過腳手架Vue-cli來安裝相應的依賴類庫來實現這個功能。

首先來建立一個新的項目

vue init webpack vue-mobile

 啓動以後就看到初始的Vue項目的起始頁面——Welcome to Your Vue.js App

這個時候咱們能夠去看看項目的根目錄下的文件 .postcssrc.js，裏面有這麼一段代碼：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // ...  
    "autoprefixer": {}    
  }
}

這些默認的插件咱們已經有了。下面就直接再安裝一些咱們須要用到的插件到咱們的項目中就行了。

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

哦，還有一個。咱們這裏用到了cssnano的另外一項配置，因此還要安裝另外一個插件：

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

安裝完這些依賴以後，咱們回到根目錄的.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,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

注意這裏原有的 autoprefixer屬性沒有了。由於下面的 cssnano 裏面已經對這個屬性經行了設置。

如今基本上就完成了，這裏咱們能夠在components的HelloWorld.vue中加入一段話來測試一下。

<p class="mine">這是測試響應式佈局的一句話！</p>

.mine{
  font-size: 24px;
}

而後 run 一下項目，看一下效果。在瀏覽器調試工具中切換手機模式開關。發現字體會根據當前模擬設備的窗口來改變字體顯示的大小。

可是咱們審查元素能夠發現其實咱們在 css 中定義的是 px 的單位，可是在這裏的樣式單位倒是 vw 。那麼恭喜就是這樣的，由於咱們在前面已經配置過 viewportUnit 這個屬性的值爲 vw 了。

在編寫 css 代碼的時候，直接寫設計圖上的實際像素就能夠了。項目會自動編譯 px 爲 vw 單位在頁面上渲染。對於一些不想編譯轉換的狀況，在元素中加上 .ignore、.hairlines 類就能夠了。

到這裏，基本的項目響應已經實現了。其餘的一些詳細的、進階的問題能夠參考下這篇 《如何在Vue項目中使用vw實現移動端適配》