使用CSS的font-size属性可直接设置文字大小，支持px、%、em、rem等单位；2. 视口单位vw/vh实现屏幕自适应缩放；3. 媒体查询适配不同设备字体大小；4. JavaScript动态调整并保存用户偏好。结合使用可优化文本缩放效果。
HTML文本缩放可以通过多种方式调整文字大小比例，主要依赖CSS样式控制。下面介绍几种常用且有效的方法。
使用CSS的font-size属性
最直接的方式是通过font-size属性设置文字大小。可以使用像素（px）、百分比（%）、em、rem等单位。
- 像素（px）：固定大小，例如font-size: 16px;，适合精确控制。
- 百分比（%）：相对于父元素字体大小，例如font-size: 120%;，便于响应式设计。
- em：相对于当前元素的字体大小，常用于局部缩放。
- rem：相对于根元素（html）的字体大小，适合全局统一调整。
通过视口单位实现自适应缩放
使用vw（视口宽度单位）或vh可以让文字随屏幕尺寸变化自动缩放。
- 例如：font-size: 4vw; 表示字体大小为视口宽度的4%。
- 适合全屏展示页面或移动端适配，但需注意最小/最大字号限制。
利用媒体查询适配不同设备
结合@media查询，在不同屏幕尺寸下设置不同的字体大小。
立即学习“前端免费学习笔记（深入）”；
- 例如在小屏幕上缩小字体，在大屏幕上放大。
- 提升可读性和用户体验，尤其适用于响应式网页。
JavaScript动态调整文本缩放
若需要用户手动控制缩放（如“增大字体”按钮），可用JavaScript动态修改根元素或目标元素的字体大小。
- 通过获取按钮点击事件，修改document.documentElement.style.fontSize。
- 配合localStorage保存用户偏好，提升体验。
基本上就这些常用方法。选择哪种方式取决于你的具体需求：静态页面可用CSS，响应式设计推荐结合rem与媒体查询，交互性强的场景可加入JavaScript控制。合理搭配能实现良好的文本缩放效果。不复杂但容易忽略细节，比如设置最小字号防止过小影响阅读。
