vue-cli 項目裏屏幕自適應

不少同窗可能在寫h5的時候，也會遇到移動端如何控制屏幕自適應問題！
在移動端網頁開發中，咱們能夠用手機淘寶的flexible．那麼在vue當中，也一樣能夠用！
接下來就介紹下如何在vue-cli配置的項目裏來實現屏幕自適應
1、首先，咱們須要安裝flexible庫．
項目目錄下 cmd命令：npm install lib-flexible

2、而後在項目入口文件main.js裏引入lib-flexible
import 'lib-flexible'

3、記得配置meta標籤,在index.html文件當中（有的已是有的，就不用修改了）
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4、接着，咱們在項目當中寫css的時候將px轉成rem,咱們能夠藉助px2rem這個工具，也是一樣要安裝

npm install px2rem-loader

 

5、而後就是配置這個工具，因爲是loader文件，全部的loader文件都是在until.js文件裏的一個方法生成的．

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

代碼如圖：

這樣就配置完成了，以後命令重啓項目，咱們只須要在設計稿裏量到多少寫多少了！

好比：在設計稿裏量到title的字體大小爲18px,那麼在項目中就直接寫18px，是否是特爽！

 

原文連接地址：https://www.cnblogs.com/zlbrother/p/7823380.html