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

不少同窗可能在寫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，是否是特爽！

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

 

感謝關注！