H5開發類似rpx實現方法

MvloveYouForever發表於2024-11-17
H5
1、postcss-px2rem-exclude（推薦） || postcss-px2rem（不推薦）；
2、rem.js
第一步：
npm install postcss-px2rem-exclude --save

//找到：postcss.config.js
//在plugins新增
'postcss-px2rem-exclude': {
      remUnit: 37.5,// 1rem等於多少px，此為轉換單位（不重要）
      exclude: /node_modules|folder_name/i     //遮蔽node_modules裡的css，使用postcss-px2rem不能遮蔽，所以會導致引入的一些ui變形
   }
第二步：
新建rem.js
 // 設定 rem 函式
 function setRem() {
     // 320 預設大小16px; 320px = 20rem ;每個元素px基礎上/16
     let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
     console.log(htmlWidth)
         //得到html的Dom元素
     let htmlDom = document.getElementsByTagName('html')[0];
     if (htmlWidth >= 450) {
         //設定根元素字型大小 ,以此控制頁面元素大小程度
         htmlDom.style.fontSize = 22 + 'px';
     } else {
         //設定根元素字型大小，以此控制頁面元素大小程度
         htmlDom.style.fontSize = htmlWidth / 20 + 'px';
     }

 }
 // 初始化
 setRem();
 // 改變視窗大小時重新設定 rem
 window.onresize = function() {
     setRem()
 }
根據視窗大小動態設定根元素的size；
// rem.js 第二種寫法
// rem等比適配配置檔案
// 基準大小
const baseSize = 14
// 設定 rem 函式
function setRem () {
  // 當前頁面寬度相對於 1920寬的縮放比例，可根據自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設定頁面根節點字型大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據實際業務需求調整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變視窗大小時重新設定 rem
window.onresize = function () {
  setRem()
}

man.js中引入

import './util/rem'

vue.config中配置外掛

 
// 引入等比適配外掛
const px2rem = require('postcss-px2rem')
 
// 配置基本大小
const postcss = px2rem({
  // 基準大小 baseSize，需要和rem.js中相同
  // remUnit: 14 代表 1rem = 14px; 所以當你一個14px值時，它會自動轉成 (14px/14)rem
  remUnit: 14
})
 
// 使用等比適配外掛
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
      postcss: {
        plugins: [
          postcss,
        ],
      },
    },
  },
}

忽略的寫法可以有多個資料夾：admin 和 element-ui/

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px2rem-exclude":{
      remUnit:37.5,
      exclude:/admin|element-ui/   //此目錄下的檔案不會被轉換為rem
    }
  }
};

相關文章