PANDA-JSR/SecScore
1
0
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-19 19:04:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(css): 优化移动端小屏设备的样式适配

Browse Source 
调整移动端小屏设备下的组件尺寸和布局，包括侧边栏菜单、按钮、输入框、表格和模态框等，提升触摸操作体验和可读性。移除冗余的媒体查询规则，统一使用平台特定的选择器进行适配。
This commit is contained in:
Yukino_fox
2026-03-22 20:10:04 +08:00
parent 25e79bc726
commit c291177ec1
1 changed files with 38 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+38 -64
View File
@@ -102,30 +102,43 @@ select {
);
}
@media (pointer: coarse) {
.ss-sidebar .ant-menu-item {
/* 移动平台（iOS/Android）小屏设备适配 */
@media (max-width: 768px) {
/* 侧边栏菜单项增大触摸区域 */
html.platform-ios .ss-sidebar .ant-menu-item,
html.platform-android .ss-sidebar .ant-menu-item {
min-height: 48px;
font-size: 16px;
}
.ant-btn {
min-height: 44px;
/* 按钮和输入框保持合适大小 */
html.platform-ios .ant-btn,
html.platform-android .ant-btn {
min-height: 40px;
}
.ant-input,
.ant-select-selector,
.ant-input-number {
min-height: 44px;
html.platform-ios .ant-input,
html.platform-ios .ant-select-selector,
html.platform-ios .ant-input-number,
html.platform-android .ant-input,
html.platform-android .ant-select-selector,
html.platform-android .ant-input-number {
min-height: 40px;
font-size: 16px;
}
.ant-table th,
.ant-table td {
padding-top: 14px;
padding-bottom: 14px;
/* 表格单元格增加内边距 */
html.platform-ios .ant-table th,
html.platform-ios .ant-table td,
html.platform-android .ant-table th,
html.platform-android .ant-table td {
padding-top: 12px;
padding-bottom: 12px;
}
.ant-modal {
/* 模态框全屏 */
html.platform-ios .ant-modal,
html.platform-android .ant-modal {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
@@ -136,80 +149,41 @@ select {
right: 0 !important;
}
.ant-modal-content {
html.platform-ios .ant-modal-content,
html.platform-android .ant-modal-content {
height: 100vh !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ant-modal-body {
html.platform-ios .ant-modal-body,
html.platform-android .ant-modal-body {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-modal-wrap {
html.platform-ios .ant-modal-wrap,
html.platform-android .ant-modal-wrap {
overflow: hidden !important;
}
.ant-select-dropdown {
/* 下拉菜单高度限制 */
html.platform-ios .ant-select-dropdown,
html.platform-android .ant-select-dropdown {
max-height: 50vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table-wrapper {
/* 表格横向滚动 */
html.platform-ios .ant-table-wrapper,
html.platform-android .ant-table-wrapper {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table {
min-width: 600px !important;
}
}
@media (max-width: 480px) {
.ant-modal {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
.ant-modal-content {
height: 100vh !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.ant-modal-body {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-modal-wrap {
overflow: hidden !important;
}
.ant-table-container {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.ant-table {
min-width: 600px !important;
}
.ant-select-dropdown {
max-height: 50vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
.ss-table-center .ant-table th,