页脚原来四列等宽:品牌、作品、联系、公众号。看起来整齐,实际很散。
品牌被压成一条窄柱,链接列大量留白,二维码孤零零挂在最右。手机上更糟:内容直接贴边,因为外层容器没有水平内边距。
这篇记录重排的判断和两个看不见的问题。
两个测量出来的问题
先量,不猜。在 1440 宽下取 header、区块、页脚三处的 getBoundingClientRect:
- Header 内容左边缘:x=104
- 区块内容左边缘:x=104
- 页脚内容左边缘:x=80
页脚比正文靠左 24px。原因是页脚用了 container 但没有 px-6,而其他区块都是 container 加 px-6。
另一个问题:页脚外层写了 max-w-76rem。在 Tailwind v4 里这个类没有生成 CSS,实测外层宽度是 1440,不是 1216。max-w 用的是容器刻度,不是任意 rem;要写就写 max-w-[76rem]。
这两个问题不修,换什么分栏都歪。
四等分为什么不成立
四个区块的内容重量完全不同:
- 品牌:品牌标 + 两行定位 + 一行版权
- 作品:四条链接
- 联系:三条链接
- 公众号:一个 112px 的二维码加说明
等宽会把「链接列」拉得很空,把「二维码列」拉得很孤。整齐是网格的整齐,不是视觉的平衡。
改成 4 / 2 / 2 / 4:品牌 4 栏、作品 2 栏、联系 2 栏、公众号 4 栏。链接列窄一点更紧凑,二维码有足够空间。
断点
- 1024 以上:12 栏,4 / 2 / 2 / 4
- 768 到 1023:三栏,作品、联系、公众号并排,品牌整行
- 768 以下:两栏,作品和联系并排,品牌与公众号整行
公众号始终纵向:二维码在上,名字和提示在下。横向排列在窄列里会把文字压成一条。
顺手换掉版权行
原来品牌列底部是 © 公司主体。现在改成站点自己的信息:
- 2018.06 建站 · 已运营 8 年 4 个月
- 建站作者:Jie
时间取自 site.since(2018-06-26),按整月计算。运营时长在构建时计算,重新构建会更新。
这样页脚只描述站点本身,不和公司主体绑定。
验证
- 1440 / 768 / 390 三档截图
- 浅色、暗色各一遍
- lint、tsc、生产构建通过
页脚不是内容区,但它决定了整页的收尾。四等分是网格的答案,不是排版的答案。