vue自适应字体大小

1.首先我在untils里面新建一个fontsize.js文件夹

内容如下

//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;

// 换算方法

function nowSize(val, initWidth = 1920) {
  return val * (nowClientWidth / initWidth);
}

export default nowSize;

然后在main.js中全局注册

import nowsize from "./utils/fontSize";
Vue.prototype.$nowsize = nowsize;

创建一个用于根据当前视口宽度进行字体大小换算的方法。这个方法接受的两个参数：val（待转换的值）和initWidth（初始宽度，默认为1920）。

代码中 document.documentElement.clientWidth 表示 在当前视口 的宽度（以像素为单位），而 nowClientWidth 变量则保存了这个值。

nowSize 方法使用了简单的 比例换算 公式，通过将当前视口宽度与初始宽 度进行比较，来确定一个转换系数。然后，这个转换系数会被 用于将给定的值 val 按比例缩放。

例如，如果你想将 字体大小从 初始宽度下的 16 像素转换为当前视口宽 度下的字体大小，可以 调用 nowSize(16)。