MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
测试移动端 |
继续测试移动端 |
||
| 第101行: | 第101行: | ||
flex-direction: column; /* 默认移动端纵向 */ |
flex-direction: column; /* 默认移动端纵向 */ |
||
align-items: stretch; |
align-items: stretch; |
||
width: 100%; /* 占满整个页面 */ |
|||
gap: 10px; /* 分类之间的间距 */ |
|||
} |
} |
||
/* 适配桌面端 |
/* 适配桌面端:横向排列,均分宽度 */ |
||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||
.software-info { |
.software-info { |
||
flex-direction: row; |
flex-direction: row; |
||
flex-wrap: wrap; |
flex-wrap: wrap; |
||
justify-content: space-between; |
justify-content: space-between; |
||
| ⚫ | |||
} |
} |
||
.software-info-section { |
.software-info-section { |
||
flex: 1; /* |
flex: 1 1 25%; /* 让每个分类占 1/4 宽度,确保 4 列等宽 */ |
||
| ⚫ | |||
display: flex; |
display: flex; |
||
flex-direction: column; |
flex-direction: column; |
||
| ⚫ | |||
max-width: 25%; /* 强制 4 列布局 */ |
|||
box-sizing: border-box; /* 让 padding 和 border 不影响宽度计算 */ |
|||
} |
|||
} |
|||
/* 适配移动端:改回纵向排列 */ |
|||
@media (max-width: 767px) { |
|||
.software-info-section { |
|||
| ⚫ | |||
max-width: 100%; |
|||
} |
} |
||
} |
} |
||