移動端主要採用rem佈局，vue+webpack，通過webpack編譯，將css中px自動轉成rem或其它單位，這裡採用px2rem-loader進行轉換，最後引入lib-flexible，實現不同裝置不同解析度的彈性適配。

實現步驟

第一步：引入lib-flexible

# 下載lib-flexible
npm i lib-flexible --save

# 在vue入口main.js匯入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from '@/router'
import 'lib-flexible/flexible'

Vue.config.productionTip = false

import '@/assets/global.less'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

第二步：引入px2rem-loader

# 下載px2rem-loader
npm install px2rem-loader --save-dev

# utils.js中配置loader
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
 

支援less

引入less-loader

npm install less less-loader --save-dev

注：以上方案，只能轉換vue檔案中style裡的css，對於內聯樣式無能為力。內聯樣式以及元件間傳參的css，只好另外想辦法，可以重寫loader，通過正則匹配後進行轉換。

<template>
  <div class="template-view">

  </div>
</template>

<script>
export default {
  name: 'template',
  components: {},
  data () {},
  methods: {}
}
</script>

<style scoped>
</style>