浏览器窗口放大缩小自动适配字体和元素的大小详解(附源码)

通过 JavaScript 动态设置根元素 ( html)font-size，rem的

建立最初的字体
在 Vue 项目的入口文件（如main.js）中，根据html的 `font-size：

function setHtmlFontSize() {
  const baseSize = 16; // 基础字体大小
  const designWidth = 1920; // 设计稿的宽度
  const clientWidth = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = (clientWidth / designWidth) * baseSize + 'px';
}

window.addEventListener('resize', setHtmlFontSize);
在你的 CSS 或组件样式中使用rem的 

 .title{
    font-size: 2.2rem;
    padding: 0.5rem 1rem;
  }