成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue中使用第三方UI庫的移動端rem適配方案

raoyi / 1878人閱讀

摘要：需求使用腳手架搭建項(xiàng)目，并且使用第三方的庫比如，的時候，因?yàn)榈谌綆煊玫亩际怯脝挝唬瑹o法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫的轉(zhuǎn)換成單位。否則會出現(xiàn)混亂頁面。

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

解決辦法：使用px2rem-loader插件將第三方ui庫的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è)計稿的寬度為 750 / 10)
  }
}

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

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

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è)置根節(jié)點(diǎn)的（html節(jié)點(diǎn)）font-size。否則會出現(xiàn)混亂頁面。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52511.html

相關(guān)文章

  • vue中使用第三方UI庫的移動端rem適配方案

    摘要：需求使用腳手架搭建項(xiàng)目，并且使用第三方的庫比如，的時候，因?yàn)榈谌綆煊玫亩际怯脝挝唬瑹o法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫的轉(zhuǎn)換成單位。否則會出現(xiàn)混亂頁面。 需求：使用vue-cli腳手架搭建項(xiàng)目，并且使用第三方的UI庫（比如vant，mint ui）的時候，因?yàn)榈谌綆煊玫亩际怯胮x單位，無法使用rem適配不同設(shè)備的屏幕。 解決辦法：使用px2rem-loader插件...

    littleGrow 評論0 收藏0

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

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

    Kyxy 評論0 收藏0

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

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

    CodeSheep 評論0 收藏0

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

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

    monw3c 評論0 收藏0

發(fā)表評論

0條評論

raoyi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<