网页字号动态调整的核心是通过JavaScript修改html元素的font-size，结合rem单位实现全局响应式缩放；支持按钮切换、localStorage记忆、Ctrl±快捷键及兼容性回退机制。
网页字号动态调整的核心是通过 JavaScript 修改元素的 font-size 样式属性，通常作用于 <html> 或 <body> 标签，借助 CSS 的相对单位（如 rem）实现全局缩放。
设置基础字体大小（以 html 为根）
推荐将基准字号设在 <html> 元素上，后续所有使用 rem 的元素会自动按比例响应：
- 初始设置可写在 CSS 中：
html { font-size: 16px; } - JavaScript 中修改：
document.documentElement.style.fontSize = '18px'; - 这样，
1rem就从 16px 变为 18px，所有rem单位的字体、间距等同步放大
提供用户可操作的字号切换按钮
常见做法是提供“小 / 中 / 大”三档或滑块控制，绑定点击/输入事件：
- HTML 示例：
<button data-size="14">小</button> <button data-size="16">中</button> <button data-size="18">大</button> - JS 监听：
document.querySelectorAll('button[data-size]').forEach(btn => btn.addEventListener('click', e => { const size = e.target.dataset.size; document.documentElement.style.fontSize = size + 'px'; })) - 可配合 localStorage 记住用户上次选择：
localStorage.setItem('fontSize', size);，页面加载时读取并应用
支持键盘快捷键（如 Ctrl + +/-）
增强可访问性，监听组合键实时调整：
立即学习“Java免费学习笔记（深入）”；
- 监听
keydown事件，判断e.ctrlKey与按键码（e.key === '+' || e.key === '-' || e.key === '0'） - 获取当前
fontSize值（可用getComputedStyle(document.documentElement).fontSize解析出像素值） - 每次 ±2px 调整，最小不小于 12px，最大不超过 24px，避免文字过小或溢出
确保样式适配与回退机制
动态改字号后，需兼顾布局稳定性和旧浏览器兼容性：
- 优先用
rem定义字体、内边距、外边距；避免大量使用固定px - 对图片、按钮高度等非文本元素，可搭配
em或 CSS 自定义属性（--base-size）统一控制 - 若不支持
rem（如 IE8），可降级为修改body的font-size并用em，或直接遍历文本节点批量设置style.fontSize（不推荐，性能差）
