98 lines
2.0 KiB
CSS
98 lines
2.0 KiB
CSS
|
/**
|
|||
|
|
* responsive.css — 全屏响应式适配样式表
|
|||
|
|
*
|
|||
|
|
* Phase 1 · UI 全屏响应式适配
|
|||
|
|
* 桌面版：对话界面铺满浏览器窗口，无大片空白
|
|||
|
|
* 手机版：768px 以下切换为移动布局，触摸友好
|
|||
|
|
*
|
|||
|
|
* 版权：国作登字-2026-A-00037559
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* ─── 核心响应式框架变量 ─── */
|
|||
|
|
:root {
|
|||
|
|
--content-max-width: 900px;
|
|||
|
|
--chat-padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── 桌面版：内容区域铺满 ─── */
|
|||
|
|
.app-container,
|
|||
|
|
#app.on {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
height: 100dvh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#center-area {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 聊天消息区域使用最大宽度控制可读性 */
|
|||
|
|
#msgs {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: var(--chat-padding);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── 登录卡片：桌面版加宽 ─── */
|
|||
|
|
.sc {
|
|||
|
|
max-width: 600px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── 768px 手机版断点 ─── */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
:root {
|
|||
|
|
--chat-padding: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 登录卡片：手机版全宽 */
|
|||
|
|
.sc {
|
|||
|
|
max-width: 100%;
|
|||
|
|
margin: 0 16px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 消息气泡自适应宽度 */
|
|||
|
|
.bbl {
|
|||
|
|
max-width: 85%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 触摸友好：按钮最小 44px × 44px（Apple HIG 标准） */
|
|||
|
|
button,
|
|||
|
|
.btn,
|
|||
|
|
.sc-btn,
|
|||
|
|
.login-tab {
|
|||
|
|
min-height: 44px;
|
|||
|
|
min-width: 44px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 输入区域底部固定 */
|
|||
|
|
footer {
|
|||
|
|
position: sticky;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 50;
|
|||
|
|
padding-bottom: max(14px, env(safe-area-inset-bottom));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── iPhone / iOS 安全区域适配 ─── */
|
|||
|
|
@supports (padding: env(safe-area-inset-bottom)) {
|
|||
|
|
#app.on {
|
|||
|
|
padding-top: env(safe-area-inset-top);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
padding-left: env(safe-area-inset-left);
|
|||
|
|
padding-right: env(safe-area-inset-right);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#setup {
|
|||
|
|
padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
|
|||
|
|
}
|
|||
|
|
}
|