怎样在移动端适配这种滑动显示效果？

为了在移动端适配滑动显示体温条的效果，你需要考虑响应式设计和触摸操作优化。以下是几个关键步骤：

1. **媒体查询（Media Queries）**：针对移动设备的屏幕尺寸，使用CSS的媒体查询（@media screen and (max-width: ...)) 来调整布局和元素大小。比如，你可以减少体温条的宽度，使其更适合小屏幕。

2. **触屏优化**：
- **触摸手势识别**：使用触摸事件，如touchstart, touchmove 和 touchend，代替鼠标滚动。这允许用户通过滑动手势来控制体温条的宽度。
- **缩放和滑动区域**：限制体温条的滑动区域，避免用户意外触发其他部分。

3. **手指穿透（Touch穿透）**：如果体温条位于其他可交互元素之上，确保底层元素能接收触摸事件，可以通过CSS `pointer-events: none;` 或 JavaScript 设置层叠上下文来解决。

4. **动画优化**：考虑到移动设备性能，使用硬件加速的CSS动画（如`transform: translateX()`）可能会比纯JavaScript更流畅，尤其是在低端设备上。

5. **测试**：在真实设备和模拟器上进行全面测试，确保在各种屏幕尺寸和操作系统下都能良好工作。

@media only screen and (max-width: 600px) {
  /* 移动端特定的样式 */
}

/* 触摸区间的CSS */
.thermometer__bar {
  touch-action: pan-y; /* 允许垂直滑动 */
}