亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項(xiàng)目做屏幕自適應(yīng)處理方式

 更新時(shí)間：2023年01月12日 11:12:50   作者：高先生的貓  
這篇文章主要介紹了vue項(xiàng)目做屏幕自適應(yīng)處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

起由

項(xiàng)目基于vue-cli搭建，之前項(xiàng)目采用less的功能函數(shù)集合媒體查詢做的屏幕適配，但是由于JavaScript的對(duì)浮點(diǎn)數(shù)據(jù)處理，這個(gè)語(yǔ)言本身的bug問(wèn)題，總是會(huì)出現(xiàn)一些計(jì)算誤差，這里重新做的項(xiàng)目采用淘寶的lib-flexible的庫(kù)，來(lái)做屏幕自適應(yīng)處理。


vue-cli搭建完成以后，安裝完依賴，項(xiàng)目可以運(yùn)行以后，我們接著安裝felxible庫(kù)：

npm i lib-flexible -S

npm安裝不上去的，可以切換到cnpm上來(lái)安裝，然后在主文件main.js里面引入：

import  'lib-flexible'

在index.html文件中設(shè)置meta標(biāo)簽：

<meta name='viewport' content='width=device-width ， initial-scale=1.0'>

然后在項(xiàng)目中寫(xiě)css時(shí)會(huì)自動(dòng)將rem轉(zhuǎn)化為px，需要安裝px2rem這個(gè)工具，安裝：

npm i px2rem-loader -D

在until.js配置文件對(duì)loader做相關(guān)配置：

如上圖，在cssLoader對(duì)象下面添加一個(gè)px2remLoader對(duì)象：

  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //這個(gè)參數(shù)是通過(guò)psd設(shè)計(jì)稿的  寬度 / 10 來(lái)計(jì)算,這里以750為標(biāo)準(zhǔn)
      remUnit : 75  
    }
  }

然后將utils.js文件中的generateLoaders函數(shù)的loaders常量改為[cssLoader， px2remLoader]

如下圖：

const loaders = [cssLoader， px2remLoader];

這樣就做完了所以配置，當(dāng)你做開(kāi)發(fā)時(shí)，只需要將設(shè)計(jì)稿上面量到的尺寸寫(xiě)出來(lái)就可以了，比如font-size:18px;就直接寫(xiě)18px就可以

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論