让页面在手机上也好读的几个细节

先给内容一个舒适的宽度

桌面屏幕很宽，但正文不必铺满整屏。可以给外层容器设置最大宽度，让长段落保持适合阅读的行长；小屏幕则保留左右内边距。

.container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.article { max-width: 720px; }

让布局自动收缩

卡片列表可以使用 Grid。当空间不足时，让列数自然减少；侧边栏也可以在小屏幕移到正文下方。与绝对定位相比，这类布局更能适应内容长度。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}

处理图片与长字符串

图片可以设置 max-width: 100% 与 height: auto，避免超过容器。普通长链接可以用 overflow-wrap: anywhere 换行；代码块保留横向滚动，避免破坏代码的缩进。

给触控留出空间

小屏幕上的文字要能直接阅读，按钮之间留出间距。不要把多个链接紧挤在一行，也不要让关键操作依赖鼠标悬停后才出现。

保留浏览器缩放能力。视口设置通常使用 width=device-width, initial-scale=1 即可。

用内容检查断点

从窄屏缓慢拉宽窗口，观察导航拥挤、标题换行和列宽变化，在内容开始难读的位置调整布局。除了手机与桌面，也检查横屏和平板宽度。

• 页面没有意外的整体横向滚动。
• 标题、正文与按钮没有重叠。
• 键盘焦点能够看清。
• 放大文字后内容仍然可读。