Vue3中rem适配方案 淘宝flexible在PC端适配

//useFlexibleRem.ts

export function useFlexibleRem() {
  const docEl = document.documentElement;
  const dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem dynamically based on screen width
  function setRemUnit() {
    const designWidth = 1920; // 设计稿宽度
    const minWidth = 1024; // 最小适配的屏幕宽度
    const screenWidth = Math.max(docEl.clientWidth, minWidth); // 当前屏幕宽度与最小适配宽度比较
    const rem = (screenWidth / designWidth) * 100; // 1rem = 100px at designWidth
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    const fakeBody = document.createElement("body");
    const testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
}

在main.ts中使用

// main.ts

import { useFlexibleRem } from "@/hooks/useFlexibleRem"; // 导入插件
// 使用插件设置 REM 适配
useFlexibleRem();

这个函数导入成功后即可在项目中任意地方使用，使用方法为在1920*1024这个设计稿下100px为1rem。最小适配大小为宽度为1024px。

注意：

在开发项目过程中注意字体大小最小为12px的适配

该函数有以下功能:

1、设置页面的根字体大小 (rem)，以适应不同屏幕宽度。
2、根据设备像素比率 (devicePixelRatio) 调整页面元素的样式，以支持高分辨率屏幕。
3、监听窗口的变化事件，以动态调整字体大小和布局