vue在移動端的自適應布局

一. 安裝插件(lib-flexible 和 postcss-loader、postcss-px2rem)

npm i lib-flexible --save  

npm install postcss-loader postcss-px2rem --save

二. 配置插件

　　1. 在入口文件 main.js 中引入 lib-flexible  (如: 


 

import Vue from 'vue'
import App from './App'
import router from './router'

import 'lib-flexible';  //引入

 

 

 

 　　 2.  在 build/utils.js 文件中配置 px2rem-loader

 

exports.cssLoaders = function (options) {
  options = options || {}

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75,  //根據視覺稿，rem為px的十分之一，750px = 10rem (一般移動端設計圖750px)
      remPrecision: 2//換算的rem保留幾位小數點
    }
  }

}

然后!!!
把 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
替換成  const loaders = [cssLoader, px2remLoader];

如下圖:

 

 

 

 

三.  效果圖

 

 

  代碼:

<template>
  <div id="home">
   
    <div class="box">我是效果圖</div>

    
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
//box設置750px   然后就自動轉化成10rem了
.box {
  width: 750px;
  height: 300px;
  background: #ccc;
}
</style>