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

移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem

  發(fā)布時(shí)間:2019-08-26 14:24:25   作者:佚名   我要評(píng)論
這篇文章主要介紹了移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem的相關(guān)資料,需要的朋友可以參考下
  • 先安裝postcss-pxtorem: npm install postcss-pxtorem --save-dev 進(jìn)行安裝
  • 通過(guò)屏幕的變化,設(shè)置動(dòng)態(tài)根元素 font-size :

 

我寫(xiě)在vue的html中

function setRem () {
        let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth;  //檢測(cè)html的屏幕寬度和body的屏幕寬度
        document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //設(shè)置font-size在750屏幕下的尺寸為100px,這樣轉(zhuǎn)換的rem可以一目了然之前是多少px的。開(kāi)發(fā)屏幕尺寸自己選,3.2的320屏幕寬也可以。
      }
      setRem();
      window.onresize = function () {   //瀏覽器尺寸變化進(jìn)行觸發(fā)window.onresize函數(shù),然后觸發(fā)函數(shù)setRem()
        setRem()
      }

-然后在 .postcssrc.js 中進(jìn)行 postcss-pxtorem 配置( .postcssrc.js是腳手架自動(dòng)生成文件。配置完,要重新npm run dev 運(yùn)行 ):

 

紅圈內(nèi)的需要配置的,剩下的是自帶的 :
 

 

'postcss-pxtorem': {
  rootValue: 100,  //根元素大小設(shè)置,也就是html的font-size大小
  unitPrecision: 5,  //保留rem小數(shù)點(diǎn)多少位
  propList: ['*'],    //  是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表,這里設(shè)置為['*']全部,假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置,可以寫(xiě)['*', '!border*']  
  selectorBlackList: ['.radius'],  //則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組,比如你設(shè)置為['fs'],那例如fs-xl類(lèi)名,里面有關(guān)px的樣式將不被轉(zhuǎn)換,這里也支持正則寫(xiě)法。
  replace: true,  //這個(gè)真不知到干嘛用的。有知道的告訴我一下
  mediaQuery: false,  //媒體查詢(xún)( @media screen 之類(lèi)的)中不生效
  minPixelValue: 12  //px小于12的不會(huì)被轉(zhuǎn)換

    }

配置完了可以重新運(yùn)行了npm run dev 
 

 

200px的寬高
 

200px變成2rem 配置的100px為font-size。rootValue為100

 

設(shè)置class名為radius的樣式不被轉(zhuǎn)換
 

 

總結(jié)

以上所述是小編給大家介紹的移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • 吃透移動(dòng)端 1px的具體用法

    這篇文章主要介紹了吃透移動(dòng)端 1px的具體用法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-16
  • postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)

    這篇文章主要介紹了postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)
    2019-12-03
  • Html5移動(dòng)端適配IphoneX等機(jī)型的方法

    這篇文章主要介紹了Html5移動(dòng)端適配IphoneX等機(jī)型的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起
    2019-06-25
  • 淺談移動(dòng)端適配大法

    這篇文章主要介紹了淺談移動(dòng)端適配大法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-05
  • html5實(shí)現(xiàn)移動(dòng)端適配完美寫(xiě)法

    這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫(xiě)法,需要的朋友可以參考下
    2017-11-16
  • 詳解如何使用rem或viewport進(jìn)行移動(dòng)端適配

    這篇文章主要介紹了詳解如何使用rem或viewport進(jìn)行移動(dòng)端適配,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編
    2020-08-14

最新評(píng)論