最初看到博客在 4K 屏幕上两侧空得很多，我以为页面没有适配高分辨率，于是开始加宽容器、增加卡片列数，还为 2K 和 4K 准备了新的断点。
后来我去看了一些平时使用的网站，也查看了 Tailwind CSS 官网。我没有发现它们会因为屏幕更大，就把正文、导航和卡片一起放大。内容到达最大宽度以后停在中间，两侧留白很常见。
我这才意识到，最初看到的留白并不是故障。
高分辨率不等于更宽的网页
网页布局接收的是 CSS 视口宽度。4K 是显示器的物理分辨率，经过系统缩放和浏览器缩放后，网页拿到的宽度可能只有 1920 CSS 像素，也可能更小。
MDN 对 devicePixelRatio 的说明区分了物理像素与 CSS 像素。如果按照 2K、4K 这些名称写断点，同一台显示器换一个缩放比例，页面就会进入另一套布局。这样的规则并不可靠。
高像素密度真正影响的是图片。图片需要足够的源文件尺寸，并通过 Next.js Image 的 sizes 和 srcset 让浏览器选择资源。它不要求页面容器跟着变宽。
Tailwind 默认不会把页面越放越大
Tailwind CSS 的响应式设计文档列出了 sm、md、lg、xl 和 2xl 断点，但只有组件写了对应的 class，样式才会变化。超过最后一个已使用的断点以后，页面保持原样。
这个博客现在只保留默认布局：
const PAGE_CONTAINER_CLASS_NAME = "mx-auto w-full max-w-7xl px-4";
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">max-w-7xl 把内容限制在 80rem。文章列表在 768px 变成两列，在 1280px 变成三列。再宽也还是三列。
这和我看到的大多数内容网站更接近。超大屏提供了更多外围空间，不代表正文必须横向拉长，也不代表首页必须塞进更多卡片。
几次专门适配改坏了什么
为了消除宽屏留白，我把首页容器、文章容器和 Markdown 页面一起扩大。首页在普通桌面视口里出现过密的五列卡片，文章则变成宽卡片套窄正文。Tools 和 About 原来的排版也被同一套规则带坏了。
代码里还出现了 3xl、4xl、8xl、10xl 等项目自定义值。每次修改一个容器，都要检查导航、列表、文章、目录和普通页面。它没有解决新的内容需求，只是增加了更多互相牵连的宽度规则。
所以这次把专门适配全部删掉。首页、文章、Tools 和 About 统一回到 Tailwind max-width 文档中的 max-w-7xl；列表最多三列；目录使用默认 xl 断点。2K、4K 和更宽的屏幕不再触发额外布局。