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

小編給大家分享一下移動(dòng)端適配如何使px自動(dòng)轉(zhuǎn)換rem，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

慈溪網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

• 先安裝postcss-pxtorem： npm install postcss-pxtorem --save-dev 進(jìn)行安裝

• 通過(guò)屏幕的變化，設(shè)置動(dòng)態(tài)根元素 font-size ：

 

我寫在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的。開發(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è)置，可以寫['*', '!border*']  
  selectorBlackList: ['.radius'],  //則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
  replace: true,  //這個(gè)真不知到干嘛用的。有知道的告訴我一下
  mediaQuery: false,  //媒體查詢( @media screen 之類的)中不生效
  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)換
 

 

以上是“移動(dòng)端適配如何使px自動(dòng)轉(zhuǎn)換rem”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：移動(dòng)端適配如何使px自動(dòng)轉(zhuǎn)換rem
轉(zhuǎn)載來(lái)于：http://muchs.cn/article32/ippspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、微信小程序、云服務(wù)器、自適應(yīng)網(wǎng)站、商城網(wǎng)站、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)