[vue] 项目使用rem 单个组件 PC端自适应大屏

rem.js

export function resetRem() {
  // 基准大小
  baseSize = 100;
  const basePc = baseSize / 1440; // 表示1440的设计图,使用100PX的默认值
  const vW = window.innerWidth; // 当前窗口的宽度

  const rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  document.documentElement.style.fontSize = `${rem}px`;
}

import { resetRem } from '@/util/rem';

created() {
    resetRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = () => {
      resetRem();
    };
  },

font-size: 0.17rem;

参考：

​​使用rem配置PC端自适应大屏​​

​​vue部分页面重置rem比例​​