很多同學可能在寫h5的時候，也會遇到移動端如何控制屏幕自適應問題！
在移動端網頁開發中，我們可以用手機淘寶的flexible．那麽在vue當中，也同樣可以用！
接下來就介紹下如何在vue-cli配置的項目裏來實現屏幕自適應
首先，我們需要安裝flexible庫．
npm i lib-flexible --save
然後在項目入口文件main.js裏引入lib-flexible
import ‘lib-flexible‘
記得配置meta標簽,在index.html文件當中
<meta name="viewport" content="width=device-width, initial-scale=1.0">
接著，我們在項目當中寫css的時候將px轉成rem,我們可以借助px2rem這個工具，也是同樣要安裝

npm i px2rem-loader --save-dev

然後就是配置這個工具，由於是loader文件，所有的loader文件都是在until.js文件裏的一個方法生成的．

我們只要在until.js裏找到cssLoader這個對象，在它下面再加一個px2remLoader對象即可

然後放到下面的generateLoaders函數中loaders數組中

這樣就配置完成了，之後重啟項目，我們只需要在設計稿裏量到多少寫多少了！

比如：在設計稿裏量到title的字體大小為18px,那麽在項目中就直接寫18px，是不是特爽！

有興趣的朋友可以關註下本人今日頭條號，分享的全是項目中的幹貨,還有面試題解答等等

直接搜索頭條號名稱：　web前端開發工程師

PC端今日頭條搜索

今日頭條app直接在頭部搜索欄裏輸入：web前端開發工程師

感謝關註！

vue-cli腳手架裏如何配置屏幕自適應