国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

raoyi / 1876人閱讀

摘要:需求使用腳手架搭建項目,并且使用第三方的庫比如,的時候,因為第三方庫用的都是用單位,無法使用適配不同設備的屏幕。解決辦法使用插件將第三方庫的轉換成單位。否則會出現混亂頁面。

需求:使用vue-cli腳手架搭建項目,并且使用第三方的UI庫(比如vant,mint ui)的時候,因為第三方庫用的都是用px單位,無法使用rem適配不同設備的屏幕。

解決辦法:使用px2rem-loader插件將第三方ui庫的px轉換成rem單位。

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

</>復制代碼

  1. var px2remLoader = {
  2. loader: "px2rem-loader",
  3. options: {
  4. remUnit: 75 // (這里是指設計稿的寬度為 750 / 10)
  5. }
  6. }

然后在generateLoaders函數里面插入px2remLoader ,再重啟 npm run dev服務即可。

(3)把px轉換成rem的配置完成后,還需要在入口文件(main.js)里面配置一段代碼,此代碼的目的是監聽window窗口大小的變化,從而動態改變html根節點的font-size的大小。達到適配不同設備的效果;(注意:不知道為什么要動態改變html根節點的font-size的話,建議去看一下rem的知識)

</>復制代碼

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

上面代碼是為了當第一次加載main.js的時候就設置根節點的(html節點)font-size。否則會出現混亂頁面。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52511.html

相關文章

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

    摘要:需求使用腳手架搭建項目,并且使用第三方的庫比如,的時候,因為第三方庫用的都是用單位,無法使用適配不同設備的屏幕。解決辦法使用插件將第三方庫的轉換成單位。否則會出現混亂頁面。 需求:使用vue-cli腳手架搭建項目,并且使用第三方的UI庫(比如vant,mint ui)的時候,因為第三方庫用的都是用px單位,無法使用rem適配不同設備的屏幕。 解決辦法:使用px2rem-loader插件...

    littleGrow 評論0 收藏0
  • vue 使用lib-flexable,px2rem 進行移動適配 但是引入的三方UI組件 vu

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

    Kyxy 評論0 收藏0
  • vuevue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

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

    CodeSheep 評論0 收藏0
  • vuevue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

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

    monw3c 評論0 收藏0

發表評論

0條評論

raoyi

|高級講師

TA的文章

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