响应式问题

今天遇到一个问题，组件已经设计为响应式，但是在移动端字体太小，多次调试无果，最终发现原因就在于我在main.js入口文件中引用了如下函数

/*** 设置根元素的字体大小，以实现页面的自适应布局。* @param {number} bs - 基准字体大小，默认值为 16* @param {number} width - 设计稿宽度，默认值为 335* 根据当前屏幕宽度与设计稿宽度的比例，动态调整根元素的字体大小。* 最大缩放比例限制为 2 倍。*/
const setRootFontSize  = function(bs = 16,width = 335) {
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const baseSize = bs; // 基准字体大小
const scale = screenWidth / width; // 设计稿宽度（通常为 375px）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 限制最大缩放比例
}

 

教训：1）如果要用这个函数统一调整，那么组件内字体大小就无需设置为响应式rem，em等，必须设置为px，最后统一由该函数去管理。
2）如果组件完成实现了响应式，包括网格布局，row,col都用上了，字体也用了rem，em等，那么就不需要在入口文件调用该函数

总结：该函数是一个控制字体的函数，关键是字体大小的设置单位。