vue2 使用 fontSize 做内联样式的自适应

新建 font.js 文件，写入以下代码

function fontSize(res) {
  let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;//这里的1920是指屏幕的宽度，看设计稿自行更换
  return res * fontSize;
}
export default {
  fontSize,
};

在 main.js 里引入并使用

import fontSize from "./assets/js/font.js";
Vue.prototype.$fontSize = fontSize;

使用时动态绑定内联样式，给变量使用这个 js 赋值 我以一个进度条的宽度举例

<h3 :style="font-size:qwe"></h3>

data(){
	return{
		qwe:0
	}
}

mounted() {
	this.qwe=this.$fontSize.fontSize(24)
}

会 vue 的应该能看懂...不具体写了，这时就给 h3 这个标签赋值 24px，在页面上显示时会和使用了 px2rem 是一样的效果，自动转成 rem 单位