feat: 实现响应式布局优化，适配移动端设备

- 修改主页和其他页面的宽度为百分比布局，添加最大宽度限制
- 增加媒体查询规则，针对不同屏幕尺寸调整布局和样式
- 优化导航栏、卡片和列表在移动端的显示效果
- 添加滚动条隐藏样式，提升移动端用户体验

css/homepage-other.less

@@ -1,6 +1,9 @@
 #homepage-other {
-    width: 1200px;
+    width: 100%;
+    max-width: 1200px;
     margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0 10px;
 
     .head-navigation {
         margin-bottom: 20px;
@@ -239,7 +242,8 @@
             }
 
             .list-area {
-                width: 860px;
+                width: 100%;
+                box-sizing: border-box;
                 background-color: rgba(255, 255, 255, 1);
                 border: 1px solid rgba(233, 238, 242, 1);
                 border-radius: 10px;
@@ -321,4 +325,161 @@
             }
         }
     }
+
+    @media screen and (max-width: 900px) {
+        .matter {
+            flex-direction: column;
+
+            .card-user {
+                width: 100%;
+                margin-right: 0;
+                margin-bottom: 20px;
+                position: static;
+                padding: 20px;
+
+                .avatar {
+                    width: 80px;
+                    height: 80px;
+                }
+
+                .btn-area {
+                    display: flex;
+                    flex-wrap: nowrap;
+                    justify-content: center;
+                    gap: 10px;
+                    width: 100%;
+
+                    .item {
+                        flex: 1;
+                        width: auto;
+                        margin-bottom: 0 !important;
+                    }
+                }
+            }
+
+            .matter-content {
+                width: 100%;
+
+                .message-box {
+                    padding: 20px;
+
+                    .header {
+                        display: none;
+                    }
+
+                    .info-list {
+                        padding: 0;
+                        .item {
+                            width: 100%;
+                            justify-content: space-between;
+                        }
+                    }
+                }
+
+                .list-area {
+                    padding: 20px;
+
+                    .classify {
+                        overflow-x: auto;
+                        justify-content: flex-start;
+
+                        .item {
+                            width: auto;
+                            padding: 0 10px;
+                            height: 28px;
+                            line-height: 28px;
+                            font-size: 13px;
+                            border-radius: 8px;
+                        }
+                    }
+
+                    .empty {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 480px) {
+        .head-navigation {
+            font-size: 12px;
+        }
+
+        .matter {
+            .matter-content .list-area {
+                padding-left: 10px;
+                padding-right: 10px;
+
+                .classify {
+                    padding: 20px 0;
+
+                    .item {
+                        padding: 0 7px;
+                    }
+                }
+            }
+            .card-user {
+                .btn-area {
+                    flex-direction: column;
+                    .item {
+                        flex: none;
+                        width: 100%;
+                        margin-bottom: 10px !important;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 430px) {
+        .matter .matter-content .list-area .classify .item:not(:last-child) {
+            margin-right: 7px;
+        }
+    }
+}
+
+@media screen and (max-width: 1015px) {
+    .item-box .bottom .bottom-item:not(:last-child) {
+        margin-right: 45px;
+    }
+}
+@media screen and (max-width: 955px) {
+    .item-box .bottom .bottom-item:not(:last-child) {
+        margin-right: 30px;
+    }
+}
+
+@media screen and (max-width: 900px) {
+    .head-top {
+        .post-list,
+        .sign-in {
+            display: none !important;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .head-top {
+        .logo {
+            height: 30px;
+            width: auto;
+        }
+        .input-box {
+            background: transparent !important;
+            border: none !important;
+            width: auto !important;
+            padding: 0 !important;
+
+            .placeholder,
+            .input,
+            .search-box-history {
+                display: none !important;
+            }
+            .icon {
+                margin: 0 10px;
+                display: block !important;
+            }
+        }
+    }
 }