MediaWiki:Common.css：修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
继续测试移动端 |
继续优化移动端 |
||
| 第99行： | 第99行： | ||
.software-info { |
.software-info { |
||
display: flex; |
display: flex; |
||
flex-direction: column; /* 默认移动端纵向 */ |
flex-direction: column; /* 默认是移动端，纵向排列 */ |
||
| ⚫ | |||
align-items: stretch; |
|||
gap: 10px; /* 设置间距 */ |
|||
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; |
|||
} |
} |
||
.software-info-section { |
.software-info-section { |
||
width: 25%; /* 每个分类占总宽度的 1/4 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-width: 250px; /* 避免列太窄 */ |
|||
max-width: 25%; /* 强制 4 列布局 */ |
|||
box-sizing: border-box; /* 让 padding 和 border 不影响宽度计算 */ |
|||
} |
} |
||
} |
} |
||
/* 适配移动端： |
/* 适配移动端：纵向排列，填满整行 */ |
||
@media (max-width: 767px) { |
@media (max-width: 767px) { |
||
.software-info-section { |
.software-info-section { |
||
width: 100%; /* 每个分类单独一行，占满整个宽度 */ |
|||
max-width: 100%; |
|||
} |
} |
||
} |
} |
||
/* |
/* 分类标题样式 */ |
||
.software-info-section |
.software-info-section caption { |
||
width: 100%; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
font-weight: bold; |
font-weight: bold; |
||
text-align: center; |
text-align: center; |
||
padding: |
padding: 8px; |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
width: 100%; /* 让表格填充父容器 */ |
|||
| ⚫ | |||
} |
} |
||
| 第148行： | 第139行： | ||
.software-info-section th, |
.software-info-section th, |
||
.software-info-section td { |
.software-info-section td { |
||
border: 1px solid var(--mw-border-color); |
border: 1px solid var(--mw-border-color, #ccc); |
||
padding: 8px; |
padding: 8px; |
||
text-align: left; |
text-align: left; |
||