网页排版总翻车，为啥没人告诉我，“度量”这玩意儿才是布局的灵魂？

在那些大部头的印刷排版书里，总有一个词儿叫“度量”，听着挺玄乎，其实就是一行文字的物理长度。但真把这东西玩明白了，就会发现它压根儿不是什么死板的数字，而是能盘活整个网页布局的幕后大佬。

啥是度量

话说很久以前，还没啥电脑排版那会儿，印刷师傅们用的是实打实的铅字。他们得把一个个铅字码进一个叫“ composing stick ”的排字条里，这排字条的宽度，就叫“度量”。这玩意儿说白了，就是你一排放得下多少个铅字的那个空间，整张纸的边距、留白、分栏，全得围着这个宽度转。

这就好比是盖房子，房子的框架得根据那块地皮的尺寸来设计。在网页里，这个“度量”就是一块专门给文字准备的地皮。如果这块地皮的大小刚刚好，文字待着就舒服，读起来顺溜；要是地皮太宽或太窄，文字就像被挤成沙丁鱼罐头，或者像在操场上罚站，怎么看怎么别扭。

在CSS里，可以先把“度量”定义成一个随时能改的变量。

:root {
  --measure: 60ch;
}

这里用的是ch单位，这玩意儿是跟着当前字体里“0”这个字符的宽度走的。一般来说，一行字里塞60到70个字符是看着最舒服的长度，所以拿65个字符当基准挺靠谱。

得留意一下， 60ch只是个起点，不是万能公式。每个字体的脾气都不一样，有的字体x高度大，看着就显胖，那60ch在视觉上就会觉得特别长；有的字体瘦窄，60ch又显得像个小短腿。所以得把60ch当成一个基础款，然后眯起眼睛瞅瞅实际效果，再手动微调。

以前为了让文字别一拉拉老长，经常用max-width来限制。现在更讲究了，得换成CSS逻辑属性，这样能更好地适应不同的书写模式。

article {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

这么一搞，文章主体就不会在大屏幕上像根面条似的无限延伸。用margin-inline: auto还能让文字块自动在中间待着，两边留出空白，整个版面的呼吸感一下子就出来了。

CSS的多栏布局（column-width）是个被严重低估的好东西。与其费劲指定得有几栏，不如就告诉浏览器，每栏的宽度大概是多宽。

article {
  column-width: var(--measure);
}

这里面有个小细节， 当包裹这些栏的容器足够宽的时候，浏览器会自动根据column-width算出能塞下几栏，然后哗啦一下把文字填进去。要是容器不够宽，比如手机竖屏，它就自动退回成单栏。整个过程不用写任何媒体查询，全是内容自己说了算，是不是很丝滑？

当需要做一个内容区加一个侧边栏的布局时，可以让网格里的主内容区死死抱住--measure这个大腿。

.layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 1fr;
}

这样，第一栏的宽度会被牢牢限制在--measure以内，保证正文读着舒服。第二栏则像一块海绵，吸走剩下的所有空间。这种布局方式，就像给不同的人量体裁衣，谁也不会委屈谁。

以前做响应式，脑子里想的全是屏幕尺寸，320px、768px、1024px，这些数字都是设备定的，跟内容半毛钱关系没有，被戏称为“猜点”。

现在有了容器查询，就可以让组件根据它自己的“小容器”的宽度来变脸。比如，当某个容器变得比--measure还窄时，就让它换个样式。

/* 当容器宽度小于等于我们的舒适度量时 */
@container (max-width: var(--measure)) {
  [data-layout="yogi"] {
    grid-template-columns: 1fr;
  }
}

初始布局	容器变窄后
主栏3fr	单栏1fr
侧栏1fr	自适应

这样一来，布局的切换就不是看屏幕是横是竖，而是看这块“地”有没有足够的空间让文字舒服地躺着。这种由内容驱动的响应式，才是真·智能。

项目里内容五花八门，不可能一个度量走天下。可以多准备几个变体，搞一套度量系统。

:root {
  --measure: 60ch;
  --measure-s: 55ch;
  --measure-l: 80ch;
}

把字体、间距、布局都跟这套度量系统挂钩，整个页面看起来就会特别和谐，每一个元素都不是凭空蹦出来的，而是有内在联系的。