在移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)中,我們可以用手機(jī)淘寶的flexible.那么在vue當(dāng)中股冗,也同樣可以用霹陡!
接下來(lái)就介紹下如何在vue-cli配置的項(xiàng)目里來(lái)實(shí)現(xiàn)屏幕自適應(yīng)
首先,我們需要安裝flexible庫(kù).
npm i lib-flexible --save
然后在項(xiàng)目入口文件main.js里引入lib-flexibleimport 'lib-flexible'
記得配置meta標(biāo)簽,在index.html文件當(dāng)中<meta name="viewport" content="width=device-width, initial-scale=1.0">
接著止状,我們?cè)陧?xiàng)目當(dāng)中寫(xiě)css的時(shí)候?qū)x轉(zhuǎn)成rem,我們可以借助px2rem這個(gè)工具烹棉,也是同樣要安裝npm i px2rem-loader --save-dev
然后就是配置這個(gè)工具,由于是loader文件导俘,所有的loader文件都是在until.js文件里的一個(gè)方法生成的.
我們只要在until.js里找到cssLoader這個(gè)對(duì)象峦耘,在它下面再加一個(gè)px2remLoader對(duì)象即可
然后放到下面的generateLoaders函數(shù)中l(wèi)oaders數(shù)組中
這樣就配置完成了,之后重啟項(xiàng)目旅薄,我們只需要在設(shè)計(jì)稿里量到多少寫(xiě)多少了!
比如:在設(shè)計(jì)稿里量到title的字體大小為18px,那么在項(xiàng)目中就直接寫(xiě)18px泣崩。
轉(zhuǎn)載:https://www.cnblogs.com/zlbrother/p/7823380.html