/* ===== 响应式设计增强 ===== */ /* 超大屏幕 (1536px+) */ @media (min-width: 1536px) { .container { max-width: 1536px; } .ticker-flip-card { width: 280px; height: 120px; } } /* 大屏幕 (1280px - 1535px) */ @media (min-width: 1280px) and (max-width: 1535px) { .container { max-width: 1280px; } } /* 中等屏幕/平板横屏 (1024px - 1279px) */ @media (min-width: 1024px) and (max-width: 1279px) { .container { max-width: 1024px; } .ticker-carousel { gap: 60px; } } /* 平板竖屏 (768px - 1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .container { max-width: 768px; padding-left: 1.5rem; padding-right: 1.5rem; } /* 侧边栏适配 */ .sidebar { width: 240px; } .main-content { margin-left: 240px; } /* 功能按钮调整 */ .feature-btn { padding: 0.75rem 1rem; font-size: 0.875rem; } /* 3D卡片调整 */ .ticker-flip-card { width: 180px; height: 90px; } } /* 手机横屏/小平板 (640px - 767px) */ @media (min-width: 640px) and (max-width: 767px) { /* 侧边栏全屏 */ .sidebar { width: 100%; position: fixed; z-index: 50; transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } /* 主内容区域 */ .main-content { margin-left: 0 !important; padding: 1rem; } /* 欢迎文字调整 */ .text-3d-container h2 { font-size: 1.5rem; } /* 输入区域优化 */ .input-area { padding: 1.5rem; } .input-area textarea { font-size: 15px; } } /* 手机竖屏 (480px - 639px) */ @media (min-width: 480px) and (max-width: 639px) { /* 容器调整 */ .container { padding-left: 1rem; padding-right: 1rem; } /* 头部调整 */ header { padding: 0.75rem 1rem; } /* 隐藏部分导航项 */ .nav-container .nav-link:not(:first-child):not(:last-child) { display: none; } /* 欢迎区域 */ .deepseek-welcome-section { padding: 1rem 0; } .text-3d-container h2 { font-size: 1.25rem; line-height: 1.4; } /* 功能按钮网格 */ .function-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .feature-btn { width: 100%; padding: 0.5rem; font-size: 0.75rem; } .feature-btn i { font-size: 1rem; } /* 3D新闻卡片 */ .ticker-3d-container { height: 80px; padding: 15px 0; } .ticker-flip-card { width: 100px; height: 60px; } .news-content { font-size: 10px; } /* 聊天界面 */ #chatMessages { height: calc(100vh - 280px); padding: 0.75rem; } .message-item { margin-bottom: 0.75rem; } .user-message, .ai-message { max-width: 90%; padding: 0.625rem 0.875rem; font-size: 14px; } /* 聊天输入框 */ #chatModeInput { padding: 0.75rem; } #chatModeMessageInput { font-size: 14px; min-height: 40px; max-height: 100px; } } /* 小手机屏幕 (320px - 479px) */ @media (max-width: 479px) { /* 全局字体大小调整 */ body { font-size: 14px; } /* 容器最小边距 */ .container { padding-left: 0.75rem; padding-right: 0.75rem; } /* 头部精简 */ header { padding: 0.5rem 0.75rem; height: 3rem; } .logo-container h1 { font-size: 1rem; } /* 仅显示必要的导航 */ .nav-container { display: none; } /* 欢迎文字进一步缩小 */ .text-3d-container h2 { font-size: 1.125rem; white-space: normal; text-align: center; } .rotating-word-3d { font-size: 1.125rem; } /* 输入区域紧凑化 */ .input-area { padding: 1rem; border-radius: 16px; } .input-area textarea { font-size: 14px; min-height: 50px; } /* 功能按钮单列 */ .function-controls { display: flex; flex-direction: column; gap: 0.5rem; } .feature-btn { width: 100%; justify-content: center; padding: 0.625rem; } /* 深度研究控制面板 */ .deep-research-controls { padding: 0.75rem; margin-top: 0.5rem; } .deep-research-controls .text-sm { font-size: 0.75rem; } /* 3D新闻区域最小化 */ .ticker-3d-container { height: 60px; padding: 10px 0; } .ticker-flip-card { width: 80px; height: 50px; } .ticker-carousel { gap: 20px; } /* 聊天消息区域优化 */ #chatContainer { padding: 0; } #chatMessages { height: calc(100vh - 240px); padding: 0.5rem; } .message-item { margin-bottom: 0.5rem; } .user-message, .ai-message { max-width: 95%; padding: 0.5rem 0.75rem; font-size: 13px; border-radius: 12px; } .message-time { font-size: 10px; } /* 底部输入框 */ #chatModeInput { padding: 0.5rem; background: rgba(255, 255, 255, 0.95); } .input-wrapper { padding: 0.5rem; } #chatModeMessageInput { font-size: 13px; padding: 0.5rem; min-height: 36px; max-height: 80px; } .send-button { width: 32px; height: 32px; } /* 侧边栏优化 */ .sidebar { width: 85vw; } .menu-item { padding: 0.625rem; font-size: 0.875rem; } .menu-icon { width: 24px; height: 24px; font-size: 1.125rem; } .chat-history-item { padding: 0.5rem 0.75rem; } .chat-title { font-size: 0.813rem; } /* 底部功能区域隐藏部分 */ .bottom-links { font-size: 0.75rem; gap: 0.5rem; } /* Markdown内容优化 */ .markdown-content { font-size: 13px; line-height: 1.5; } .markdown-content h1 { font-size: 1.25rem; } .markdown-content h2 { font-size: 1.125rem; } .markdown-content h3 { font-size: 1rem; } .markdown-content pre { padding: 0.5rem; font-size: 12px; } .markdown-content code { font-size: 12px; padding: 0.125rem 0.25rem; } } /* 超小屏幕特殊处理 (低于320px) */ @media (max-width: 319px) { body { font-size: 12px; min-width: 280px; } .container { padding-left: 0.5rem; padding-right: 0.5rem; } .text-3d-container h2 { font-size: 1rem; } .feature-btn span { display: none; } .feature-btn { padding: 0.5rem; } .feature-btn i { font-size: 1.25rem; } } /* 横屏模式优化 */ @media (orientation: landscape) and (max-height: 500px) { /* 减少垂直空间占用 */ header { height: 2.5rem; padding: 0.25rem 1rem; } .deepseek-welcome-section { display: none; } .ticker-3d-container { height: 50px; padding: 5px 0; } #chatMessages { height: calc(100vh - 120px); } .input-area { padding: 0.75rem; } #chatModeInput { padding: 0.5rem; } } /* 触摸设备优化 */ @media (hover: none) and (pointer: coarse) { /* 增大可点击区域 */ button, .menu-item, .chat-history-item { min-height: 44px; } /* 移除悬停效果 */ .ticker-flip-card:hover .flip-card-inner { transform: none; } /* 简化动画 */ .ticker-carousel { animation: none; } /* 触摸友好的滚动 */ .chat-messages, .sidebar .overflow-y-auto { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } } /* 高分辨率屏幕优化 */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* 细边框处理 */ .sidebar, .input-area, .feature-btn, .chat-history-item { border-width: 0.5px; } } /* 深色模式支持 */ @media (prefers-color-scheme: dark) { /* 可以添加深色模式样式 */ } /* 打印优化 */ @media print { .sidebar, .ticker-3d-container, .input-area, .function-controls, header, footer { display: none !important; } .main-content { margin: 0 !important; padding: 20px !important; } .chat-messages { height: auto !important; overflow: visible !important; } .message-item { page-break-inside: avoid; } } /* 安全区域适配 (iPhone X及以上) */ @supports (padding: max(0px)) { .sidebar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } header { padding-top: max(0.75rem, env(safe-area-inset-top)); } #chatModeInput { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } } /* 折叠屏设备支持 */ @media (min-width: 768px) and (max-width: 1024px) and (min-aspect-ratio: 1/1) { .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .deepseek-welcome-section { grid-column: 1; } .deepseek-input-section { grid-column: 2; } }