本文详解如何通过 resizeobserver 与事件监听协同工作，使可拖拽元素的宽度实时映射为 css 自定义属性，并与 number 类型输入框双向绑定，确保 typography 应用中“文本行宽（measure）”的精确、响应式控制。
本文详解如何通过 resizeobserver 与事件监听协同工作，使可拖拽元素的宽度实时映射为 css 自定义属性，并与 number 类型输入框双向绑定，确保 typography 应用中“文本行宽（measure）”的精确、响应式控制。
在现代排版工具开发中，用户常需通过两种互补方式调节关键参数：一是直观的拖拽交互（如调整容器宽度模拟行宽变化），二是精确的数值输入（如输入 66rem 指定理想行长）。要真正实现 UX 一致性，二者必须双向同步——拖动时更新输入值与 CSS 变量，输入时也应反向驱动 UI 变化。本文以 --_typecsset-text-measure 为核心目标变量，提供一套健壮、可复用的 JS/CSS 集成方案。
✅ 核心机制：ResizeObserver + input 事件双通道驱动
关键在于建立两个独立但协同的数据流：
- 拖拽 → 输入 → CSS：利用 ResizeObserver 监听 .resizable 元素尺寸变化，将像素宽度转换为 rem 单位后同步至 和 CSS 自定义属性；
- 输入 → CSS → 布局：监听所有 input[type="number"] 的 input 事件，直接写入 CSS 变量，并隐式触发布局重绘（因 max-inline-size: var(--_typecsset-text-measure) 已绑定）。
示例代码（精简可靠版）
// 1. 统一处理所有 number 输入框（含 unit 支持）
const numberInputs = document.querySelectorAll('input[type="number"]');
numberInputs.forEach(input => {
input.addEventListener('input', function() {
const uom = this.dataset.uom || '';
const value = this.value + uom;
document.documentElement.style.setProperty(`--_${this.name}`, value);
});
});
// 2. 同步拖拽宽度到 CSS 变量 & 输入框（双向核心）
const dragElement = document.querySelector('.resizable');
const measureInput = document.getElementById('measure');
const observeMeasure = new ResizeObserver(mutations => {
const widthPx = mutations[0].contentRect.width;
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const widthRem = (widthPx / rootFontSize).toFixed(1); // 保留一位小数，提升可读性
// 同时更新 CSS 变量和输入框值
document.documentElement.style.setProperty('--_typecsset-text-measure', `${widthRem}rem`);
if (measureInput) measureInput.value = widthRem;
});
observeMeasure.observe(dragElement);⚠️ 重要注意事项
- ResizeObserver 仅响应尺寸变化，因此 .resizable 元素必须设置 resize: inline; overflow: scroll;（如原 CSS 所示），否则无法触发观察；
- getComputedStyle(document.documentElement).fontSize 是获取根字体大小的标准方式，兼容所有主流浏览器（包括 Safari）；
- 若页面存在多个 number 输入框且需区分处理，建议使用 data-name 或 id 精准定位，避免 document.querySelector('input') 的歧义；
- 为防止拖拽与输入产生循环更新（如拖动后立即修改输入再触发拖动），当前方案不主动反向设置拖拽元素宽度——这是合理的设计取舍：CSS 变量驱动布局，而拖拽仅作为用户直觉操作入口，无需强制 DOM 尺寸匹配（max-inline-size 已确保视觉一致）。
? CSS 层面的关键配合
确保以下 CSS 规则已就位，构成闭环：
:where(html) {
--_typecsset-text-measure: 80rem; /* 默认值 */
}
.center {
max-inline-size: var(--_typecsset-text-measure); /* 主动消费变量 */
}
.resizable {
resize: inline;
overflow: scroll; /* 必须！否则 ResizeObserver 不触发 */
}同时，为提升体验，建议为 #measure 输入框添加 class="width:100%"（如答案所示），使其宽度自适应父容器，避免拖拽时出现滚动条遮挡或尺寸错位。
✅ 总结：为什么这个方案更优？
- 解耦清晰：ResizeObserver 专注尺寸感知，input 事件专注数值解析，职责单一；
- 单位安全：px → rem 转换基于运行时 rootFontSize，完美适配动态字体缩放（如系统级放大）；
- 零侵入：无需修改 HTML 结构，仅增强 JS 逻辑与必要 CSS 声明；
- 可扩展：同一模式可复用于 font-size、line-height 等其他 typographic 参数，只需替换变量名与选择器。
最终效果是：用户拖动标尺，输入框数字实时跳变；手动输入数值，正文行长即时响应——真正的所见即所得排版控制。
