如何设置React开发的聊天机器人应用打开时为指定宽度且支持响应式适配

1. 基础样式实现（核心逻辑） #

仅用CSS即可实现默认固定762px、缩放窗口自动适配的效果，和亚马逊聊天机器人表现一致：

/* 聊天机器人根容器样式 */
.chatbot-root {
  /* 窗口宽度≥762px时默认固定为762px */
  width: 762px;
  /* 窗口宽度<762px时自动占满视口宽度，避免横向溢出 */
  max-width: 100vw;
  /* 窗口宽度>762px时自动居中，可选，符合亚马逊交互表现 */
  margin: 0 auto;
  /* 高度可根据业务需求调整，示例为占90%视口高度 */
  height: 90vh;
  overflow: hidden;
}

如果是悬浮式聊天窗口，把居中规则替换为定位规则即可：

.chatbot-root {
  width: 762px;
  max-width: 100vw;
  position: fixed;
  bottom: 24px;
  right: 24px;
  height: 80vh;
  border-radius: 12px;
}

2. 内部元素响应式适配 #

如果需要在不同窗口宽度下调整内部组件（字体大小、气泡间距、功能按钮显隐等），可以搭配媒体查询实现：

/* 小屏适配规则 */
@media (max-width: 762px) {
  .chatbot-root {
    height: 100vh;
    border-radius: 0;
  }
  .chat-message-bubble {
    font-size: 14px;
    padding: 8px 12px;
  }
  .chat-function-btn {
    display: none;
  }
}

/* 超大屏可选适配规则，按需添加 */
@media (min-width: 1200px) {
  .chatbot-root {
    width: 60vw;
    max-width: 900px;
  }
}

3. React侧逻辑适配（可选） #

如果需要根据窗口宽度做业务逻辑处理（比如调整消息加载数量、收起侧边栏等），可以用自定义Hook监听窗口尺寸：

import { useState, useEffect } from 'react';

// 窗口尺寸监听Hook
const useWindowWidth = () => {
  const [width, setWidth] = useState(
    typeof window !== 'undefined' ? window.innerWidth : 762
  );

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
};

// 组件内使用示例
const ChatbotApp = () => {
  const windowWidth = useWindowWidth();
  // 小屏下隐藏用户头像
  const showAvatar = windowWidth >= 762;

  return (
    <div className="chatbot-root">
      {/* 聊天机器人业务代码 */}
    </div>
  );
};

注意事项 #

• 提前重置页面全局默认margin/padding，避免小屏下出现横向滚动条
• 无需引入第三方响应式库，原生实现的性能和兼容性表现最优
• 如果需要支持用户手动拖拽调整聊天窗口大小，可以额外搭配resize: both CSS属性实现

内容的提问来源于stack exchange，提问作者Sumit Ghewade