MDN DOM示例解析：ResizeObserver实现文本自适应缩放-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01107/article/details/148574843

MDN DOM示例解析：ResizeObserver实现文本自适应缩放

dom-examples Code examples that accompany various MDN DOM and Web API documentation pages 项目地址: https://gitcode.com/gh_mirrors/do/dom-examples

概述

在现代Web开发中，响应式设计已成为基本要求。MDN DOM示例中的ResizeObserver文本测试项目展示了一种高级响应式技术：利用ResizeObserver API实现文本内容根据容器尺寸自动调整大小。这种技术特别适合需要在不同尺寸容器中保持良好可读性的场景。

核心概念解析

ResizeObserver API简介

ResizeObserver是一个现代浏览器提供的API，用于监听元素尺寸变化。相比传统的resize事件，它有以下优势：

可以监听任意DOM元素的尺寸变化，而不仅仅是窗口
性能更优，避免了频繁触发导致的性能问题
提供更详细的尺寸变化信息

响应式文本缩放原理

本项目实现的核心思路是：当容器宽度变化时，根据新的宽度值动态计算并调整标题(h1)和段落(p)的字体大小，确保文本在不同宽度下都能保持良好的可读性。

代码实现详解

HTML结构

示例采用简洁的HTML结构：

一个包含标题、段落和表单的div容器
表单包含两个控件：
- 复选框：控制ResizeObserver的启用/禁用
- 滑块：调整容器宽度

CSS布局

关键CSS特性：

使用flex布局使内容居中显示
设置容器初始宽度为50%，最小宽度320px
表单元素使用flex布局实现标签和控件的对齐

JavaScript实现

核心逻辑位于脚本部分：

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      // 处理标准实现和旧版Firefox的差异
      const inlineSize = entry.contentBoxSize[0] ? 
        entry.contentBoxSize[0].inlineSize : 
        entry.contentBoxSize.inlineSize;
      
      h1Elem.style.fontSize = Math.max(1.5, inlineSize/200) + 'rem';
      pElem.style.fontSize = Math.max(1, inlineSize/600) + 'rem';
    } else {
      // 回退方案
      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
    }
  }
});

这段代码实现了：

创建ResizeObserver实例
在回调函数中处理尺寸变化事件
根据容器宽度计算并设置字体大小
处理不同浏览器的API差异

交互控制

项目还实现了交互控制：

滑块调整容器宽度
复选框启用/禁用观察器

slider.addEventListener('input', () => {
  divElem.style.width = slider.value + 'px';
});

checkbox.addEventListener('change', () => {
  if(checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});