页眉和页脚现在通到两边

本站每个页面上都能看到的一个小改动:顶部的深色横条和底部的页脚,现在都会撑满整个窗口的宽度。

在今天之前,它们和其他所有内容一样被限制在同一个1180像素的列里,所以在宽屏幕上,页面看起来就像一条内容悬浮在大片空白背景中。统计页面上的页脚此前已经是全宽的——它是唯一的例外,而正是这种不一致促成了这次改动。

没有改变的部分

这些横条内部的内容没有变。文字、按钮和数字仍然和下方各区块对齐在同样的1180像素范围内,所以横条是宽的,但文字排版不是。没有人会去读一行上百个字符的文本,而在27英寸显示器上被拉伸满屏的标题,那不是设计,是疏忽。

为什么不用惯常的技巧

让元素脱离居中列的常见做法,是对100vw使用负外边距。这种做法有一个缺陷,在关闭了滚动条的桌面环境下很容易被忽略:vw会把滚动条的宽度也算进去。结果区块会比可视区域正好宽出滚动条那么多,整个页面还可能被左右拖动几个像素——这在手机上意味着,读到一半时,布局会在拇指下晃动。

所以这里的横条不是向外扩张,而是本身就取宽,再向内填充:

padding-inline: max(20px, calc((100% - 1180px) / 2))

百分比是相对于元素的父级来计算的,这里也就是页面的body,不包含滚动条的宽度。在1180像素以下,取值会是第一个数值,横条会保持一个合理的20像素边距,而不是负值。不需要第二层包裹元素,不需要JavaScript,运行时也不需要做任何测量。

应用范围

首页、关于页面,以及每一个统计页面。三者用的是同一种结构,这正是这次改动的用意所在。