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

創(chuàng)新互聯(lián)公司專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、屏邊網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、屏邊網(wǎng)絡(luò)營(yíng)銷(xiāo)、屏邊企業(yè)策劃、屏邊品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供屏邊建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.chinadenli.net

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

npm install postcss-pxtorem -D

postcss.config.js 新建package.json同一個(gè)目錄下，文件內(nèi)容如下

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

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

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

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

在 main.js中引入 rem.js 文件，然后啟動(dòng)項(xiàng)目

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

文章名稱(chēng)：使用postcss-pxtorem怎么適配移動(dòng)端-創(chuàng)新互聯(lián)
本文鏈接：http://www.chinadenli.net/article48/deiehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、用戶體驗(yàn)、微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)