首页/文章/开发工具

从 1080p 到 2K、4K：博客高分辨率屏幕适配记录

太阳作者太阳
原创内容采用 CC-4.0 协议发布，转载请注明出处
WebTailwind CSSShadcn响应式布局高分辨率屏幕

这次修改绕了几次弯。最初的问题很直观：1080p 下每行三张卡片合适，到了 4K，固定宽度让页面两侧空出很大一块；只把容器拉宽，三张卡片又会变得过大。

我先按缩放比例计算宽度，后来又退回 Tailwind 默认的 container。两种做法都没有抓住重点。前者塞进了太多难维护的数字，后者把所有页面都当成同一种内容页。卡片列表和长文章本来就不该共用一套宽度策略。

最后参考了 Shadcn 当前站点和 Sidebar 的源码。它的做法并不是“所有内容都固定宽度”，而是把页面外壳、侧栏、主内容区和阅读列分开处理。

Shadcn 实际怎么做

Shadcn 的 Sidebar 默认宽度是 16rem，SidebarInset 使用 w-full flex-1。侧栏保持稳定尺寸，主内容区占据剩余空间：

const SIDEBAR_WIDTH = "16rem"

<main className="relative flex w-full flex-1 flex-col bg-background">

文档站又多一层约束。左侧文档导航约 18rem，右侧主区域使用 minmax(0,1fr)：

<div className="lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)]">

真正的文档正文没有吃满整个主区域，而是单独使用 max-w-160。也就是说，外壳可以宽，导航可以固定，阅读列仍然限宽。

Shadcn 还定义了自己的 3xl 断点。自定义断点并不违背 Tailwind 的常规用法，前提是它表达明确的布局变化，而不是对应某个显示器型号。

相关源码：

博客也按页面类型拆开

这个博客现在有两种容器：

  • 首页、分类、标签、导航和页脚属于浏览型页面。超宽视口下主区域可以继续扩展，卡片随之增加列数。
  • 文章和普通 Markdown 页面属于阅读型页面。容器保持上限，正文不会横跨整个 4K 屏幕。

这比给全站套一个 container 更符合实际。container 适合固定档位内容页，但它在 2xl 后停止增长，用在卡片浏览页上就会留下过多空白。

断点表达卡片容量

Tailwind 默认的 sm 到 2xl 继续保留。项目只补两个超宽断点：

@theme inline {
  --breakpoint-3xl: 128rem;
  --breakpoint-4xl: 192rem;
  --container-8xl: 96rem;
  --container-10xl: 160rem;
}

3xl 和 4xl 不是“2K 模式”和“4K 模式”。它们表示当前宽度已经能稳定容纳四列或五列卡片。即使用户在 4K 显示器上使用较高的系统缩放，只要 CSS 视口没有达到断点，页面仍会保持三列。

这样命名后，组件里不再出现 min-[128rem]、min-[192rem]，也不需要用浏览器缩放比例推导布局。

浏览页按档位扩宽

浏览型页面在普通桌面上限制为 max-w-7xl。达到 3xl 后扩展到 8xl，达到 4xl 后扩展到 10xl，不会直接铺满整个视口：

const PAGE_CONTAINER_CLASS_NAME =
  "mx-auto w-full max-w-7xl px-4 3xl:max-w-8xl 3xl:px-6 4xl:max-w-10xl 4xl:px-8";

因此 1080p 布局不会改变，卡片仍在 1280px 左右的内容区内排列。更宽的视口才会展开页面。

卡片列表使用离散列数：

<div className="grid gap-4 md:auto-rows-56 md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 4xl:auto-rows-64 4xl:grid-cols-5 4xl:gap-6">

当前结构是：

  • 默认单列。
  • md 两列。
  • xl 三列，覆盖常见 1080p 桌面布局。
  • 3xl 四列。
  • 4xl 五列，并增加卡片行高和间距。

分类页使用相同的列数。容器和网格同时变化，宽屏不会继续显示三张被拉得很宽的卡片。

文章页保持阅读边界

文章页在 1080p 下继续使用原来的 max-w-7xl。进入 3xl、4xl 后，外层与导航、列表使用相同的 8xl、10xl 容器档位：

const ARTICLE_CONTAINER_CLASS_NAME =
  "mx-auto w-full max-w-7xl px-4 3xl:max-w-8xl 3xl:px-6 4xl:max-w-10xl 4xl:px-8";

这样可以保持同一分辨率下导航、列表和文章外层左边缘对齐。3xl 之前的类没有改变，因此 1080p 下文章宽度、左右内边距和标题位置仍是原来的样子。

带目录的文章在 1200px 以上使用正文与 11rem 目录两列。宽屏继续保持两列，不再额外插入左侧占位列；目录宽度和间距随容器档位增加：

min-[1200px]:grid-cols-[minmax(0,1fr)_11rem]
3xl:grid-cols-[minmax(0,1fr)_15rem]
4xl:grid-cols-[minmax(0,1fr)_22rem]

4K 视口下，10xl 容器、22rem 目录和 gap-8 在 50% 截图中会回到接近 1080p 的横向尺寸。没有目录时不启用分栏，文章使用完整的当前容器。

这与 Shadcn 文档站的原则相同：页面外壳和工作区域可以变宽，真正的长文本阅读列单独控制。

高像素密度是另一项检查

响应式布局处理的是 CSS 视口。高像素密度主要影响位图清晰度。

Next.js 图片需要正确的固有尺寸；响应式图片还要提供符合布局的 sizes，让浏览器选择合适的候选资源。Logo 和简单图标优先使用 SVG。增加卡片列数或页面断点不能修复模糊图片。

怎么验证

在开发者工具中连续拖动视口，比只看几个缩放百分比更可靠。需要检查：

  • xl 下是否稳定保持三列。
  • 进入 3xl 后，页面是否展开并切换四列。
  • 进入 4xl 后，是否切换五列，卡片宽度和间距是否自然。
  • 文章页是否始终保持居中，目录没有挤压正文。
  • 断点前后是否出现横向滚动、突然跳高或内容截断。

真实 2K、4K 屏幕还要分别测试常用系统缩放。显示器分辨率不是 CSS 条件，最终仍以浏览器得到的 CSS 视口为准。

更新记录

2026-08-08

  • 参考 Shadcn 的固定侧栏、流式主区域和限宽阅读列结构。
  • 浏览型页面在 3xl、4xl 分别扩展到 8xl、10xl，但不铺满视口。
  • 卡片列表在 3xl、4xl 分别增加到四列、五列。
  • 文章页在 1080p 保留原有 max-w-7xl，宽屏与导航、列表共用容器档位。
  • 宽屏文章保持正文与目录两列，删除导致左边缘错位的额外占位列。
  • 删除基于浏览器缩放比例的宽度计算。

2026-08-07

  • 记录固定三列布局在宽视口下的问题。
  • 将列表分页统一为每页 60 篇。

参考资料