Vue3基于?rem?比例縮放方案示例詳解

更新時間：2023年05月30日 09:10:01 作者：懮?俍

這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下

Vue3基于 rem 比例縮放方案

本縮放方案置于hooks中即可。于App.vue中引入并調用。會在頁面DOM結構最外層增加響應式的font-size屬性樣式更改。

主要包含了以下內容

1.接口和類型定義：

DesignParms：設計稿參數(shù)的接口定義，包括寬度、高度和字體大小等信息。
UseRemOption：使用 rem 的配置參數(shù)的接口定義，包括延遲觸發(fā)時間。
Designs：設計稿集合的類型定義，是一個由 DesignParms 構成的數(shù)組。

2.默認設計稿方案和配置參數(shù)：

DEFAULT_DESIGNS：默認的設計稿方案，包含多個不同分辨率下的設計稿信息。
DEFAULT_OPTION：默認的配置參數(shù)，包括延遲觸發(fā)時間。

3.useEqualScaling 函數(shù)：

該函數(shù)接受設計稿集合和配置參數(shù)作為參數(shù)，并返回縮放信息和方法。
函數(shù)內部根據(jù)窗口大小和設計稿信息計算最合適的設計稿作為參考設計稿。
在頁面加載和窗口大小改變時，會觸發(fā) setHtmlFontSize 方法進行根節(jié)點字體大小的計算和設置。
函數(shù)返回設計稿集合、參考設計稿和設置根節(jié)點字體大小的方法

/**
 * 基于rem 的比例縮放方案
 * @author wangguanjie 2022.06.09
 */
import { onBeforeUnmount, onMounted, ref } from "vue";
/**
 * 設計稿參數(shù)
 * @example 1920 * 1080 下 {width: 1920, height: 1080, fontSize: 16, ...}
 * @example 1680 * 1050 下 {width: 1680, height: 1050, fontSize: 14, ...}
 * @example 1280 * 800 下 {width: 1280, height: 800, fontSize: 12, ...}
 */
export interface DesignParms {
  width: number;
  height: number;
  fontSize: number;
}
export interface UseRemOption {
  delay?: number;
}
export type Designs = DesignParms[];
/**
 * 默認設計稿方案
 */
const DEFAULT_DESIGNS: Designs = [
  { width: 800, height: 600, fontSize: 12 },
  { width: 1024, height: 500, fontSize: 12 },
  { width: 1024, height: 768, fontSize: 12 }, // HD
  { width: 1280, height: 800, fontSize: 12 }, // WXGA
  { width: 1280, height: 854, fontSize: 12 },
  { width: 1280, height: 1024, fontSize: 12 },
  { width: 1366, height: 768, fontSize: 14 },
  { width: 1440, height: 900, fontSize: 14 },
  { width: 1440, height: 1050, fontSize: 14 },
  { width: 1600, height: 1024, fontSize: 14 },
  { width: 1600, height: 1200, fontSize: 14 }, // UXGA
  { width: 1680, height: 1050, fontSize: 14 },
  { width: 1920, height: 937, fontSize: 16 }, // FHD
  { width: 1920, height: 1080, fontSize: 16 }, // FHD
  { width: 1920, height: 1200, fontSize: 16 }, // WUXGA
  { width: 2048, height: 1080, fontSize: 18 },
  { width: 2048, height: 1536, fontSize: 18 }, // QXGA
  { width: 2560, height: 1080, fontSize: 18 },
  { width: 2560, height: 1440, fontSize: 18 }, // QHD
  { width: 2560, height: 1600, fontSize: 18 }, // WQXGA
  { width: 3440, height: 1440, fontSize: 18 },
  { width: 3840, height: 1080, fontSize: 18 },
  { width: 3840, height: 2160, fontSize: 18 }, // UHD
  { width: 4096, height: 2160, fontSize: 18 }, // 4K Ultra HD
];
/**
 * 默認配置參數(shù)
 */
const DEFAULT_OPTION: Required<UseRemOption> = {
  // 觸發(fā)延時，默認2022
  delay: 0,
};
/**
 * 等比縮放方案
 * @author wangguanjie 2022.06.09
 * @description 該方案支持多設計稿
 * @param designs 設計稿集合
 * @param option 縮放配置參數(shù)
 * @returns 縮放信息、方法
 */
export const useEqualScaling = function (
  designs: Designs = DEFAULT_DESIGNS,
  option: UseRemOption = DEFAULT_OPTION
) {
  let timer: number | undefined;
  // 確保有設計稿可參考
  designs = designs.length ? designs : DEFAULT_DESIGNS;
  // 將設計搞進行升序排序，供后續(xù)快速排查
  designs
    .filter((d) => d.width > 1 && d.height > 1)
    .sort((d1, d2) => {
      if (d1.width === d2.width) {
        return d1.height - d2.height;
      }
      return d1.width - d2.width;
    });
  // 降序排序的設計稿
  const descendingDesigns = designs.map((d) => d).reverse();
  // 瀏覽器適配所參考的設計稿
  const referDesign = ref(designs[0]);
  /**
   * 根據(jù)多份設計搞自適應根節(jié)點字號
   */
  const setHtmlFontSize = () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      const { clientWidth: docW, clientHeight: docH } =
        document.documentElement;
      // 匹配最佳設計稿
      const hasNewReferDesignIndex = designs.findIndex(
        (d) => d.width >= docW && d.height >= docH
      );
      if (hasNewReferDesignIndex !== -1) {
        referDesign.value = designs[hasNewReferDesignIndex];
      } else {
        // 優(yōu)先篩選寬度符合的設計搞
        const accordWidthDesigns = descendingDesigns.filter(
          (d) => d.width <= docW
        );
        // 再確認最接近設計稿高度的設計稿
        const designsHeightList = accordWidthDesigns.map((d) => d.height);
        const useDesignIndex = designsHeightList
          .map((designH) => Math.abs(docH - designH))
          .findIndex(
            (designH) =>
              designH ===
              Math.min(...designsHeightList.map((dh) => Math.abs(docH - dh)))
          );
        referDesign.value = accordWidthDesigns[useDesignIndex];
      }
      // 依據(jù)所參考的設計稿變更根節(jié)點字號
      const documentRatio = docW / docH;
      const {
        width: designW,
        height: designH,
        fontSize: designFontSize,
      } = referDesign.value;
      const designRatio = designW / designH;
      const htmlFontSize =
        documentRatio < designRatio
          ? (docW / designW) * designFontSize
          : (docH / designH) * designFontSize;
      const html = document.querySelector("html");
      if (html) {
        html.style.fontSize = `${htmlFontSize}px`;
      }
    }, option.delay ?? DEFAULT_OPTION.delay);
  };
  setHtmlFontSize();
  onMounted(() => {
    window.addEventListener("resize", setHtmlFontSize, false);
  });
  onBeforeUnmount(() => {
    window.removeEventListener("resize", setHtmlFontSize, false);
  });
  return {
    designs,
    referDesign,
    setHtmlFontSize,
  };
};

vue-cli3 中使用rem布局

1. 裝包postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2. 在根目錄src中新建utils目錄下新建rem.js等比適配文件,內容如下

// rem等比適配配置文件
// 基準大小
const baseSize = 16
// 設置 rem 函數(shù)
function setRem () {
  // 當前頁面寬度相對于 1920寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設置頁面根節(jié)點字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務需求調整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

3.在main.js中引入適配文件

import './utils/rem'

4.到vue.config.js中配置插件

// 引入等比適配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基準大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
// 使用等比適配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

到此這篇關于Vue3基于 rem 比例縮放方案的文章就介紹到這了,更多相關Vue3比例縮放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue使用el-tree 懶加載進行增刪改查功能的實現(xiàn)
這篇文章主要介紹了Vue使用el-tree 懶加載進行增刪改查,以懶加載的形式展示，目錄根據(jù)需求需要有新增編輯刪除操作以及操作后的刷新樹結構，具體實現(xiàn)代碼跟隨小編一起看看吧
2021-08-08
vue2路由中router-view不顯示的原因及踩坑記錄
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue emit之Property or method “$$v“ i
這篇文章主要介紹了vue emit之Property or method “$$v“ is not defined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue中scss語法的使用你了解嗎
這篇文章主要為大家詳細介紹了vue中scss語法的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
使用Vue的slot插槽分發(fā)父組件內容實現(xiàn)高度復用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內容實現(xiàn)高度復用、更加靈活的組件 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-05-05
基于IView中on-change屬性的使用詳解
下面小編就為大家分享一篇基于IView中on-change屬性的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Element-UI中關于table表格的那些騷操作(小結)
這篇文章主要介紹了Element-UI中關于table表格的那些騷操作(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
Vue組合式API如何正確解構props不會丟失響應性
響應式?API?賦予了組合式?API?一大坨可能性的同時,代碼精簡,雖然但是,我們應該意識到響應性的某些陷阱,比如丟失響應性,在本文中,我們將學習如何正確解構?Vue?組件的?props,使得?props?不會丟失響應性
2024-01-01
手拉手教你如何處理vue項目中的錯誤
在項目開發(fā)中經常遇到各種報錯,每次總是通過這樣或那樣的辦法解決掉,這篇文章主要給大家介紹了關于如何處理vue項目中錯誤的相關資料,需要的朋友可以參考下
2022-06-06