今天就跟大家聊聊有關使用postcss-pxtorem怎么適配移動端，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

創(chuàng)新互聯是一家集網站建設,錯那企業(yè)網站建設,錯那品牌網站建設,網站定制,錯那網站建設報價,網絡營銷,網絡優(yōu)化,錯那網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

執(zhí)行命令 安裝插件postcss-pxtorem

npm install postcss-pxtorem -D

postcss.config.js 新建package.json同一個目錄下，文件內容如下

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 32,//結果為：設計稿元素尺寸/32(一般750px的設計稿的根元素大小設置32)，比如元素寬320px,最終頁面會換算成 10rem
      propList: ['*'], //屬性的選擇器，*表示通用
      selectorBlackList:[]    忽略的選擇器   .ig-  表示 .ig- 開頭的都不會轉換
    }
  }
}

postcss.config.js此文件配置完成后需要重啟項目生效

在根目錄src中新建util目錄下新建rem.js等比適配文件

// rem等比適配配置文件
// 基準大小
const baseSize = 750 // 注意此值要與 postcss.config.js 文件中的 rootValue保持一致
// 設置 rem 函數
function setRem () {
  // 當前頁面寬度相對于 375寬的縮放比例，可根據自己需要修改,一般設計稿都是寬750(圖方便可以拿到設計圖后改過來)。
  const scale = document.documentElement.clientWidth / 375
  // 設置頁面根節(jié)點字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據實際業(yè)務需求調整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

在 main.js中引入 rem.js 文件，然后啟動項目

看完上述內容，你們對使用postcss-pxtorem怎么適配移動端有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯行業(yè)資訊頻道，感謝大家的支持。