body {
  max-width: clamp(320px, 90%, 1000px);
  /* 额外建议 */
  margin: auto;
}

添加这一行代码将减小内容大小，使其占据视口的 90%，将其宽度限制在 320 到 1000 像素之间（请随时更新最小和最大值）。

这个改变将自动使您的内容看起来更加美观。它将不再是一个巨大的文本块，而是看起来更有结构和组织。如果您还在 body 中添加 margin: auto;，内容将居中显示在页面上。两行代码让内容看起来好看多了。

body {
  font-size: 1.25rem;
}

面对现实吧：浏览器默认的 16px 字体大小太小了。 尽管这可能是基于我变老了的个人观点 😅👴

一个快速的解决方案是增加正文中的字体大小。由于浏览器使用的级联和 em 单位，网页上的所有文本都会自动增大。

body {
  line-height: 1.5;
}

另一个改进可读性、打破可怕的文本墙的偏好是增加段落和内容中行之间的间距。我们可以使用 line-height 属性轻松实现这一点。

这个选择（与前两个一起）将显著增加我们页面的垂直尺寸，但我向您保证，文本将更易读，对所有用户更友好。

img {
  max-width: 100%;
}

图像应该大致与它们将占据的空间大小相同，但有时我们会得到非常长的图片，导致内容移动并创建水平滚动。

避免这种情况的一种方法是将最大宽度设置为 100%。虽然这不是一个绝对有效的解决方案（边距和填充可能会影响宽度），但在大多数情况下都有效。

p {
  max-width: 65ch;
}

避免可怕的文本墙和空白河的另一种策略是即使与 body 中的最大宽度一起应用这种样式。这可能看起来多余，有时甚至有点奇怪，因为段落会比其他元素更窄。但我喜欢这种对比和更短的行。

对我来说，60ch 或 65ch 的值在过去有效，但您可以使用不同的值并调整最大宽度以满足您的需求。尝试并探索它在您的网页上的效果。

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

标题是网页结构的重要部分，但由于它们较大的大小和较短的内容，它们可能看起来奇怪。特别是当它们占据多于一行时。帮助的一个解决方案是使用 text-wrap 平衡标题。

尽管 balance 似乎是 text-wrap 的最受欢迎的值，但它并不是唯一的值。我们还可以使用 "pretty"，它会将额外的单词移到最后一行（如果需要）而不是平衡所有内容。不幸的是，pretty 还没有得到广泛支持。

body {
  accent-color: #080; /* 使用您喜欢的颜色 */
}

另一个小改变，对页面没有显著影响，但使事物看起来更好。直到最近，我们无法用 CSS 样式化原生表单控件，而是被困在浏览器显示中。但事情已经改变了。

开发整个组件可能很麻烦，但使用这一行代码将颜色设置为更接近站点和设计系统的颜色是可能且简单的。

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* 或 #fff1 适用于暗色主题 */
}

我们必须使用表格来显示数据，而不是用于布局。但默认情况下，表格看起来很丑，我们不希望数据看起来丑陋。特别是，有助于组织数据并使其更易读的一点是具有交替的深色/浅色行的斑马表格。

上面显示的一行代码使实现这种样式变得容易。它可以简化为仅为 tr 而不考虑 tbody 或 table 父级，但这也会应用于表头，这可能不是我们想要的。这是一个品味问题。

td, th {
  padding: 0.5em; /* 或 0.5em 1em... 或任何与 0 不同的值 */
}

使表格更易访问和阅读的最后一个更改是通过向表格单元格和标题添加填充来略微间隔内容。默认情况下，大多数浏览器没有任何填充，不同单元格的文本会接触在一起，使得区分一个单元格的开始和另一个单元格的结束变得困惑。

我们可以更改填充值以调整到我们喜欢的大小。但是，避免过度调整以避免不必要的滚动或过多的空白空间。

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* 额外建议 */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

好吧，好吧。这段代码远不止一行。它有一个一行版本（通过将动画持续时间设置为零秒来移除动画），但网页上的其他元素会使元素移动。

通过在 prefers-reduced-motion 媒体查询内设置这些声明，我们将尊重用户选择减少运动。这种方法有点激进，因为它会移除所有运动，这可能并不一定是用户的意图——它是“减少运动”而不是“无运动”。 如果合适，我们仍然可以根据具体情况保留运动。