成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue中使用第三方UI庫(kù)的移動(dòng)端rem適配方案

littleGrow / 1049人閱讀

摘要：需求使用腳手架搭建項(xiàng)目，并且使用第三方的庫(kù)比如，的時(shí)候，因?yàn)榈谌綆?kù)用的都是用單位，無(wú)法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫(kù)的轉(zhuǎn)換成單位。否則會(huì)出現(xiàn)混亂頁(yè)面。

需求：使用vue-cli腳手架搭建項(xiàng)目，并且使用第三方的UI庫(kù)（比如vant，mint ui）的時(shí)候，因?yàn)榈谌綆?kù)用的都是用px單位，無(wú)法使用rem適配不同設(shè)備的屏幕。

解決辦法：使用px2rem-loader插件將第三方ui庫(kù)的px轉(zhuǎn)換成rem單位。

(1) npm install px2rem-loader --save-dev 安裝插件
(2)然后在vue-cli項(xiàng)目找到built/utils文件，在里面加上以下代碼：

var px2remLoader = {
  loader: "px2rem-loader",
  options: {
    remUnit: 75     // (這里是指設(shè)計(jì)稿的寬度為 750 / 10)
  }
}

然后在generateLoaders函數(shù)里面插入px2remLoader ，再重啟 npm run dev服務(wù)即可。

（3）把px轉(zhuǎn)換成rem的配置完成后，還需要在入口文件（main.js）里面配置一段代碼，此代碼的目的是監(jiān)聽(tīng)window窗口大小的變化，從而動(dòng)態(tài)改變html根節(jié)點(diǎn)的font-size的大小。達(dá)到適配不同設(shè)備的效果；（注意：不知道為什么要?jiǎng)討B(tài)改變html根節(jié)點(diǎn)的font-size的話，建議去看一下rem的知識(shí)）

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName("html")[0];
    htmlDom.style.fontSize = htmlWidth / 10 + "px";
};
setHtmlFontSize();

上面代碼是為了當(dāng)?shù)谝淮渭虞dmain.js的時(shí)候就設(shè)置根節(jié)點(diǎn)的（html節(jié)點(diǎn)）font-size。否則會(huì)出現(xiàn)混亂頁(yè)面。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113457.html

相關(guān)文章

  • vue中使用第三方UI庫(kù)的移動(dòng)端rem適配方案

    摘要：需求使用腳手架搭建項(xiàng)目，并且使用第三方的庫(kù)比如，的時(shí)候，因?yàn)榈谌綆?kù)用的都是用單位，無(wú)法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫(kù)的轉(zhuǎn)換成單位。否則會(huì)出現(xiàn)混亂頁(yè)面。 需求：使用vue-cli腳手架搭建項(xiàng)目，并且使用第三方的UI庫(kù)（比如vant，mint ui）的時(shí)候，因?yàn)榈谌綆?kù)用的都是用px單位，無(wú)法使用rem適配不同設(shè)備的屏幕。 解決辦法：使用px2rem-loader插件...

    raoyi 評(píng)論0 收藏0

  • vue 使用lib-flexable，px2rem 進(jìn)行移動(dòng)端適配 但是引入的第三方UI組件 vu

    摘要：最近在寫(xiě)移動(dòng)端項(xiàng)目就想用，來(lái)進(jìn)行適配把轉(zhuǎn)換成但是也用到了第三方組件庫(kù)把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是的組件都縮小了在網(wǎng)上找不到答案最后在一個(gè)開(kāi)發(fā)群里找到了解決的方法目前的處理方法是將組件中轉(zhuǎn)化為，避免被轉(zhuǎn)成在中中配置以下代碼自定義的全局 最近在寫(xiě)移動(dòng)端項(xiàng)目,就想用lib-flexable，px2rem來(lái)進(jìn)行適配,把px轉(zhuǎn)換成rem但是也用到了第三方UI組件庫(kù)vux,把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是...

    Kyxy 評(píng)論0 收藏0

  • vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動(dòng)轉(zhuǎn)換px單位,完美解決引入第三

    摘要：使用的小伙伴兒會(huì)用到淘寶的開(kāi)源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫(kù)時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼！?。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁(yè)面，這樣就會(huì)遇到適配這個(gè)頭疼的問(wèn)題，我分享下我用經(jīng)常用到的適配方案： 這里...

    CodeSheep 評(píng)論0 收藏0

  • vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動(dòng)轉(zhuǎn)換px單位,完美解決引入第三

    摘要：使用的小伙伴兒會(huì)用到淘寶的開(kāi)源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫(kù)時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁(yè)面，這樣就會(huì)遇到適配這個(gè)頭疼的問(wèn)題，我分享下我用經(jīng)常用到的適配方案： 這里...

    monw3c 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<