A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(响应式布局): 优化移动端头部导航和用户信息展示

Browse Source 
调整媒体查询断点至480px和768px，优化小屏幕下的布局
添加移动端导航菜单显示逻辑和用户信息展示
新增关闭按钮功能及登录状态判断
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-03 19:20:15 +08:00
parent c2da892059
commit e4f97dafb8
7 changed files with 121 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/details.css
View File

@@ -1300,13 +1300,19 @@
margin: 20px 10px 30px !important;
}
.head-top.flexacenter .input-box {
margin-right: 0;
margin-right: 10px;
}
.index-footer {
min-width: inherit !important;
}
}
@media screen and (max-width: 850px) {
@media screen and (max-width: 768px) {
header.page-header {
display: none !important;
}
.index-footer {
display: none !important;
}
.head-top .post-list {
display: none !important;
}
@@ -1364,10 +1370,14 @@
top: auto;
overflow: auto;
border: none;
padding-top: 15px;
}
#details .answer-discuss .input-box .bottom .operate .item .emoji-box::after {
display: none;
}
#details .answer-discuss .input-box .bottom .operate .item:hover .file-hint {
display: none;
}
#details .answer-discuss .comments-box .input-box .picture-box {
width: calc(100vw - 88px);
}
@@ -1381,14 +1391,26 @@
width: calc(100vw - 128px);
}
}
@media screen and (max-width: 500px) {
@media screen and (max-width: 480px) {
.head-top.flexacenter {
margin-bottom: 10px !important;
}
.head-top.flexacenter .input-box {
width: inherit;
height: inherit;
background: none;
border: none;
padding: 5px;
}
.head-top.flexacenter .input-box .input,
.head-top.flexacenter .input-box .placeholder {
display: none;
}
.head-top.flexacenter .input-box .input {
display: none;
}
.head-top.flexacenter .input-box .icon {
margin-left: 0;
}
#details .answer-discuss .comments-box .comments-item .comments-header {
font-size: 12px;
}