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

創新互聯建站于2013年成立，先為紫金等服務建站，紫金等地企業，進行企業商務咨詢服務。為紫金企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

• 先安裝postcss-pxtorem： npm install postcss-pxtorem --save-dev 進行安裝

• 通過屏幕的變化，設置動態根元素 font-size ：

我寫在vue的html中

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

-然后在 .postcssrc.js 中進行 postcss-pxtorem 配置（ .postcssrc.js是腳手架自動生成文件。配置完，要重新npm run dev 運行 ）：

紅圈內的需要配置的，剩下的是自帶的 ：

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

    }

配置完了可以重新運行了npm run dev 

200px的寬高

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

設置class名為radius的樣式不被轉換

以上是“移動端適配如何使px自動轉換rem”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

分享名稱：移動端適配如何使px自動轉換rem-創新互聯
文章源于：http://vcdvsql.cn/article16/cdijdg.html

成都網站建設公司_創新互聯，為您提供ChatGPT、虛擬主機、營銷型網站建設、商城網站、網頁設計公司、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯