TinaCMS 响应式设计优化：从JS监听转向CSS媒体查询

背景介绍

在TinaCMS项目中，开发团队发现部分组件使用了@react-hook/window-size这个React Hook来监听窗口尺寸变化并调整布局。这种实现方式虽然功能上可行，但与项目整体采用CSS媒体查询实现响应式设计的方案存在不一致性。

问题分析

使用JavaScript监听窗口尺寸变化来实现响应式布局存在几个潜在问题：

1. 性能开销：JS监听会频繁触发重绘和重排
2. 代码冗余：与现有的CSS媒体查询方案重复
3. 维护困难：两种方案并存增加了代码复杂度

项目中主要受影响的是侧边栏(Sidebar)组件和一些布局调整逻辑，这些地方原本依赖JS获取窗口尺寸来决定元素显示/隐藏状态。

解决方案

团队决定将响应式逻辑统一迁移到CSS方案，具体实施要点包括：

1. 保留复杂场景的JS方案：对于渲染条件特别复杂的侧边栏逻辑，保留了原有的JS实现
2. 标准化断点：在Tailwind配置中统一管理断点值，确保全项目一致
3. 渐进式重构：分步骤验证各个组件的CSS替代方案

技术实现细节

CSS媒体查询优势

相比JS方案，CSS媒体查询具有以下优势：

• 性能更优：浏览器原生支持，减少JS计算开销
• 维护简单：所有响应式规则集中在样式表中
• 一致性：与项目现有技术栈统一

断点管理

项目中特别处理了1000px这个断点，将其纳入Tailwind配置的统一管理：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'custom-lg': '1000px',
        // 其他断点...
      }
    }
  }
}

组件适配

对于大多数简单场景，使用Tailwind的响应式前缀即可实现：

<div class="hidden lg:block">
  <!-- 大屏幕显示的内容 -->
</div>

经验总结

这次重构带给我们的启示：

1. 技术选型一致性：项目中应尽可能保持技术方案的一致性
2. 性能优先：能用CSS解决的问题尽量不用JS
3. 渐进式改进：复杂场景可以保留原有方案，避免过度设计

通过这次优化，TinaCMS的响应式实现更加规范统一，既提升了性能，也降低了后续维护成本。这种从JS到CSS的迁移思路，对于其他前端项目的响应式设计优化也具有参考价值。