響應式問題
今天遇到一個問題，組件已經設計為響應式，但是在移動端字體太小，多次調試無果，最終發現原因就在于我在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等，那么就不需要在入口文件調用該函數
總結：該函數是一個控制字體的函數，關鍵是字體大小的設置單位。
浙公網安備 33010602011771號