npm i lib-flexible --save-dev
import 'lib-flexible/flexible'
npm install px2rem-loader --save-dev
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }
同時,在generateLoaders方法中添加px2remLoadercss
function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
5.在vue的項目的根目錄中打開 /src/HelloWorld.vue 文件,把template裏面的東西全乾掉,寫上如下這些代碼:vue
<template> <div class="hello"> 適配移動端 </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { width: 200px; height: 200px; font-size: 36px; margin: 0 auto; box-sizing: border-box; border: 1px solid green; } </style>
在這裏,咱們設置了一個div的寬度是200px,接下來咱們來查看div在不一樣分辨率手機下顯示的狀況
iPhone6(屏幕寬度爲375px)java
iPhone6px(屏幕寬度爲414px)webpack
iPhone5web
注意:vue-cli
1.此方法只能將.vue文件style標籤中的px轉成rem,不能將script標籤和元素style裏面定義的px轉成remnpm
2.若是在.vue文件style中的某一行代碼不但願被轉成rem,只要在後面寫上註釋 /* no*/就能夠了flex
1.使用了vue的lib-flexible後,給div設置了一個寬度,它會跟手機分辨率大小自動調節ui
2.當設置手機屏幕大小爲375時,它的寬度是100px,說明設計稿是按照750px來設計的,375恰好是一半this