在前端开发场景中，经常需要根据窗口尺寸、用户设置或者交互状态动态调整页面元素的字体大小，当字体使用像素作为单位时，直接修改固定数值无法保证不同初始字体大小的元素按照相同比例缩放，这时候可以通过getComputedStyle方法获取元素当前的计算后字体大小，再结合目标缩放比例实现精准的相对缩放。
getComputedStyle 方法基础说明
getComputedStyle是window对象下的一个方法，用于获取元素应用所有样式后的最终样式值，返回的是一个CSSStyleDeclaration对象，我们可以通过该对象的属性读取对应的样式结果。它的基本语法如下：
// 获取目标元素
const targetElement = document.querySelector('.text-element');
// 获取元素的计算样式对象
const computedStyle = window.getComputedStyle(targetElement);
// 读取字体大小属性，返回的是带单位的字符串，比如 "16px"
const currentFontSize = computedStyle.fontSize;
需要注意的是，getComputedStyle读取到的字体大小是元素最终渲染的大小，会包含继承的样式、内联样式、外部样式表等所有来源的样式计算结果，比直接读取元素的style属性要准确很多。
实现相对缩放的核心逻辑
相对缩放的核心是保持缩放比例一致，比如希望字体放大1.5倍，不管原来的字体是12px还是20px，都按照乘以1.5的规则计算新的大小。具体实现步骤可以分为三步：
- 第一步：通过getComputedStyle获取元素当前的像素字体大小，提取其中的数值部分
- 第二步：将提取到的数值乘以目标缩放比例，得到新的字体大小数值
- 第三步：将新的数值拼接上px单位，赋值给元素的style.fontSize属性
数值提取与计算示例
getComputedStyle返回的fontSize是带单位的字符串，比如"16px"，我们需要先把前面的数值部分提取出来，转换为数字类型再计算：
/**
* 调整元素的像素字体大小，实现相对缩放
* @param {HTMLElement} element - 需要调整的目标元素
* @param {number} scale - 缩放比例，大于1为放大，小于1为缩小
*/
function adjustFontSize(element, scale) {
// 获取元素当前的计算字体大小
const computedStyle = window.getComputedStyle(element);
const fontSizeStr = computedStyle.fontSize;
// 提取数值部分，使用正则匹配数字（包含小数）
const fontSizeNum = parseFloat(fontSizeStr.match(/(d+.?d*)/)[1]);
// 计算新的字体大小数值
const newFontSizeNum = fontSizeNum * scale;
// 赋值新的字体大小，保留一位小数避免精度问题
element.style.fontSize = newFontSizeNum.toFixed(1) + 'px';
}
实际应用场景示例
最常见的场景是根据窗口宽度变化动态调整字体大小，比如窗口宽度小于768px时，所有正文内容的字体缩小到原来的0.9倍，实现移动端的适配效果：
// 获取所有需要调整的正文元素
const textElements = document.querySelectorAll('.article-content p, .article-content span');
// 定义窗口 resize 时的处理逻辑
function handleResize() {
const windowWidth = window.innerWidth;
// 窗口宽度小于768px时缩放比例为0.9，否则为1（不缩放）
const scale = windowWidth < 768 ? 0.9 : 1;
// 遍历所有元素执行缩放
textElements.forEach(element => {
adjustFontSize(element, scale);
});
}
// 初始加载时执行一次
handleResize();
// 监听窗口 resize 事件
window.addEventListener('resize', handleResize);
注意事项
使用这种方式调整字体大小时需要注意几个问题：
- getComputedStyle读取的是元素的当前渲染样式，如果元素之前已经被调整过字体大小，再次调用会基于最新的大小计算，不会回到初始值，如果需要基于初始值缩放，需要先保存初始的字体大小
- 如果元素的字体大小是通过em、rem等单位设置的，getComputedStyle返回的仍然是计算后的像素值，所以该方法同样适用，不需要额外处理单位转换
- 频繁触发resize等事件时，建议添加防抖处理，避免短时间内多次执行调整逻辑导致性能问题
如果需要保存元素的初始字体大小，可以在页面加载完成后先读取一次并存储，后续缩放都基于初始值计算，示例代码如下：
// 存储元素的初始字体大小
const elementInitialFontSizeMap = new Map();
// 初始化时保存所有目标元素的初始字体大小
document.querySelectorAll('.adjust-target').forEach(element => {
const computedStyle = window.getComputedStyle(element);
const fontSizeStr = computedStyle.fontSize;
const fontSizeNum = parseFloat(fontSizeStr.match(/(d+.?d*)/)[1]);
elementInitialFontSizeMap.set(element, fontSizeNum);
});
// 基于初始值调整字体大小的方法
function adjustFontSizeByInitial(element, scale) {
const initialSize = elementInitialFontSizeMap.get(element);
if (!initialSize) return;
const newSize = initialSize * scale;
element.style.fontSize = newSize.toFixed(1) + 'px';
}
getComputedStyle像素字体大小相对缩放前端样式修改时间：2026-07-06 08:21:23