vue+px2rem+mintUI實現H5端自適應(rem適配)

配置前言

項目構建：基於vue-cli3構建（構建時注意讓各插件可以有自己的json配置文件），使用mintUI進行組件開發，使用px2rem-loader和postcss-px2rem-exclude進行rem適配
實現原理：每次打包，webpack通過使用插件postcss-px2rem-exclude，幫我們自動將px單位轉換成rem單位

第一步，使用vue-cli3構建基礎項目，注意構建時讓配置有各自專屬文件，方便第六步配置postcss.config.js，具體可參考我之前寫的博客:Vue CLI 3 使用步驟

第二步，安裝mintUI,項目根目錄下打開命令行工具，輸入：

npm install mint-ui -S

第三步，安裝px2rem-loader和postcss-px2rem-exclude兩個插件

npm install px2rem-loader postcss-px2rem-exclude -S

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

// rem等比適配配置文件
// 基準大小
const baseSize = 75
// 設置 rem 函數
function setRem () {
  // 當前頁面寬度相對於 375寬的縮放比例，可根據自己需要修改,一般設計稿都是寬750(圖方便可以拿到設計圖後改過來)。
  const scale = document.documentElement.clientWidth / 375
  // 設置頁面根節點字體大小（“Math.min(scale, 2)” 指最高放大比例爲2，可根據實際業務需求調整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

第五步，在main.js中引入適配文件

import './util/rem'

第六步，在根目錄postcss.config.js下配置:

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-px2rem-exclude': {
    //這裏注意與rem.js中的基準大小保持一致
      'remUnit': 75,
      'exclude': '/node_modules/i'
    }
  }
}

示例頁面代碼，直接使用px即可，webpack編譯時會自動轉成rem

覆蓋根目錄/src/App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  width: 100%;
  height: 100vh;
}
* {
  margin: 0;
  padding: 0;
}
</style>

覆蓋根目錄/src/views/Home.vue

<template>
  <div class="home">
    <div class="header">這是50px高的頭部</div>
    <div class="container">這是中間容器</div>
    <div class="footer">這是50px高的底部</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  .header {
    height: 50px;
    background: yellow;
  }
  .container {
    flex: 1;
    background: cyan;
  }
  .footer {
    height: 50px;
    background: #ccc;
  }
}
</style>

示例頁面效果

啊，interesting ٩(๑>◡<๑)۶ 。
如果文章對您有所幫助，可以將網頁收藏到瀏覽器收藏夾，方便以後用到來翻，當然我就是這麼幹的。然後，點贊，關注，謝謝。