vue移動端適配

1、安裝相應依賴 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

2、根目錄新建.postcssrc.js文件
添加一下內容

module.exports = {
  'plugins': {
    'postcss-import': {}, // 用於@import導入css文件
    'postcss-url': {}, // 路徑引入css文件或node_modules文件
    'postcss-aspect-ratio-mini': {}, // 用來處理元素容器寬高比
    'postcss-write-svg': { utf8: false }, // 用來處理移動端1px的解決方案。該插件主要使用的是border-image和background來做1px的相關處理。
    'postcss-cssnext': {}, // 該插件可以讓我們使用CSS未來的特性，其會對這些特性做相關的兼容性處理。
    'postcss-px-to-viewport': { // 把px~~~~單位轉換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
      viewportWidth: 283, // 視窗的寬度 ，對應的是我們設計稿的寬度，一般是750
      viewportHeight: 1792, // 視窗的高度 根據750設備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 將px轉化為視窗單位值的小數位數
      viewportUnit: 'vw', // 指定要轉換成的視窗單位值
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換視窗單位值得類，可以自定義，可以無限添加
      minPixelValue: 1, // 小於等於1px不轉換為視窗單位
      mediaQuery: false, // 允許在媒體查詢中使用px
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
    'postcss-viewport-units': {}, // 給vw、vh、vmin和vmax做適配的操作,這是實現vw布局必不可少的一個插件
    'cssnano': { // 主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。
      preset: 'advanced', // 重復調用
      autoprefixer: false, // cssnext和cssnano都具有autoprefixer,事實上只需要一個，所以把默認的autoprefixer刪除掉，然后把cssnano中的autoprefixer設置為false。
      'postcss-zindex': false // 只要啟用了這個插件，z-index的值就會重置為1
    }
  }
}

3、根據設計稿設置html的font-size大小 【單位rem時需要設置】