主页页面自适应布局中的文字重叠及其他页面布局问题
Closed this issue · 5 comments
C6H11OH commented
问题描述
目前在主页发现以下几种布局
| 总页面宽度 | 布局 | 导航栏默认状态 |
|---|---|---|
| 1600px以上 | 中间栏较宽的三栏布局 | 显示 |
| 1200px-1599px | 中间栏较窄的三栏布局 | 显示 |
| 992px-1199px | 两栏布局 | 显示 |
| 768px-991px | 两栏布局 | 不显示 |
| 768px以下 | 一栏布局 | 不显示 |
导航栏保持默认状态时会发生文字重叠的页面宽度区间如下
- 310px及以下
- 768px-852px
- 992px-1052px
- 1200px-1323px
- 1600px-1864px
因为现在一般没有宽度低于310px的浏览器所以对此不做讨论
各模块的最小宽度
| 模块标题 | 元素不会溢出的最小宽度(约) |
|---|---|
| 天际线图片及百科标语 | 1104px |
| GitHub及编辑者入口顶栏 | 430px |
| 天际线图片 | 370px |
| 百科全书 | 310px |
| 经营 | 292px |
| 元数据 | 232px |
其中百科标语在总页面宽度1200px以上时才会显示，但导航栏会占据约200的页面宽度，所以显示导航栏时为了显示完整的百科标语需要约1304px的总页面宽度
图 百科全书模块中的mod推荐已经溢出到了下一行并且被经营模块的标题遮挡了一部分
原因分析
- 页面内容是按行固定的，每一行的内容超出模块长度时会溢出至下一行，但下一行不会向下浮动于是上一行的溢出部分就会被下一行遮挡
可能的解决方案
- 浮动所有元素，让浏览器自行决定换行，同时增加可变的模块(盒子)高度的适配
- 限制模块的最小宽度，并更改布局变更的宽度节点
C6H11OH commented
补充
这应该是一个页面错误(bug)
TureeZhang commented
非常感谢！宁可是真的太专业了，抓到的几个数据都是对的。
前端框架排版采用的阿里 Ng_Zorro 框架，主页的排布使用的是 Zorro 的 GRID 栅格：Grid栅格 - NG - ZORRO。如果方便，可以移步稍作阅读。
- 它支持了响应式布局。
- 但我自身也加入了 div 的 min-width 限制。
这样的不当做法可能就导致了元素堆叠的问题。应当来说，GRID 布局就不应该限制最小宽度，但我这么做了哈哈。主要考虑是希望你能保留维基文章目录的这个排版，因为实在觉得漂亮，但又不擅长前端，所以只能暂时这样狗住，哈哈。
非常感谢反馈，我后续应该会让他们一个个向下堆叠，牺牲目前“有意的非整齐排版”的美观性，变为每列由宽度决定是否换行。
再次感谢！可见宁的专业素养和反馈问题的严谨细致，非常感谢！
TureeZhang commented
标记为新功能需求： 因为可能需要支持动态文档目录的自动排布了，目前是写死的排版。
C6H11OH commented
最近不确定之后的安排，之后时间确定以后我看看能不能帮忙改进或者重写一个框架。我是cs专业的，不过上过一些前端的选修，希望能帮上点忙。(饼先画上...)
TureeZhang commented
问题已解决，关闭此 issue 。