在 Vue 3 中配置 rem

张旭超發表於2024-11-07
VueREM

在 Vue 3 中配置 rem 時，如果你希望實現一個最小寬度為 1024px 的適配，意思是當螢幕寬度小於 1024px 時不再縮小字型大小，始終保持最小寬度的 rem 配置。可以透過動態設定根元素的字型大小來實現。

一、自定義方法

步驟說明：
動態設定根字型大小：根據螢幕寬度動態計算根元素（<html> 標籤）的字型大小。
設定最小寬度限制：當螢幕寬度小於 1024px 時，根字型大小保持固定，避免字型過小。
使用 rem 單位：透過 rem 單位來設定元素的尺寸。
示例：實現動態根字型大小，最小寬度為 1024px
首先，我們透過 JavaScript 在 main.js 中動態調整根字型大小。然後，我們確保當螢幕寬度小於 1024px 時，根字型大小不再縮小，始終保持基準大小。

在 main.js 中設定根字型大小

<script setup>
// 設定根字型大小函式
function setRem() {
  const baseWidth = 1920; // 基準寬度，例如 1920px 是設計稿的寬度
  const minWidth = 1024; // 最小寬度限制，確保螢幕寬度不低於 1024px
  const width = window.innerWidth || document.documentElement.clientWidth;

  // 計算根字型大小
  let fontSize = (width / baseWidth) * 18; // 1920px 對應 16px 根字型大小
  // 如果螢幕尺寸還沒有到1024，這時候字型已經小於12，那麼就設定為12
  if (fontSize < 12) {
    fontSize = 12
  }

  // 限制螢幕寬度最小值為 1024px
  if (width < minWidth) {
    fontSize = 12; // 如果小於 1024px，設定根字型為該值
  }

  // 設定根字型大小，確保字型大小合理
  document.documentElement.style.fontSize = fontSize + "px";
}

// 初始化時設定根字型大小
setRem();

// 視窗大小變化時重新計算
window.addEventListener("resize", setRem);
</script>

使用rem單位進行佈局。

<template>
  <div>
    <div class="desc">使用rem單位，來控制介面縮放，設計稿吃錯為1920，適配最小螢幕寬度為1024px</div>
  </div>
</template>
<style scoped>
.desc {
  font-size: 1rem;
}
</style>

二、使用外掛

使用 rem+媒體查詢適配
透過動態調整根字型大小來實現適配。可以配合媒體查詢，設定多個螢幕寬度下的根字型大小，使不同螢幕下元素按比例縮放，適用於需要多個解析度適配的網站。

實現方式：

使用 postcss-px-to-rem 外掛，將設計稿的 px 轉換為 rem。
安裝和配置 postcss-px-to-rem

安裝外掛

npm install postcss-px-to-rem --save-dev

在 postcss.config.js 中配置：

module.exports = {
  plugins: [
    require('postcss-px-to-rem')({
      rootValue: 16, // 根字型大小
      unitPrecision: 5, // rem精度
      propList: ['*'],
    }),
  ],
};

在 main.js 中設定根字型大小，並配合媒體查詢：

// main.js
const setRem = () => {
  const baseSize = 16; // 根字型大小
  const scale = document.documentElement.clientWidth / 1920; // 比例
  document.documentElement.style.fontSize = `${baseSize * scale}px`;
};

setRem();
window.onresize = setRem;

配置不同螢幕寬度的根字型大小：

/* 媒體查詢調整不同寬度下的根字型大小 */
@media (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  html {
    font-size: 12px;
  }
}

相關文章