响应式布局，从内容出发

把浏览器窗口慢慢缩窄，最先出问题的常常不是某个设备尺寸，而是一行挤不开的文字、一张固定宽度的图片，或者一个不愿换行的容器。

01 / 先给内容一个合适的容器

从窄屏开始，先让一列内容好读。给页面设置最大宽度，同时保留两边的呼吸空间；图片跟随容器缩放，避免把页面撑出横向滚动条。

.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

这段样式没有指定“手机型号”。它描述的是内容需要的空间。文字也一样：过长的行会让阅读变累，可以单独为正文设置更窄的最大宽度。

02 / 让网格自己找到位置

一组卡片通常不必为每种屏幕写一条规则。CSS Grid 的弹性列可以在空间足够时并排，在空间不足时自然换行：

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

这里让最小列宽不超过容器，避免窄屏被固定下限撑开。对于很长的链接或代码，还需要分别考虑换行与局部滚动，不能只靠缩小字号处理。

03 / 断点，是内容发出的信号

当导航开始拥挤，或者侧栏让正文过窄，再加入媒体查询改变结构。断点应该回应这些具体问题。它可以是 48rem，也可以是另一个值；重要的是在临界宽度的两侧都实际检查。

响应式的目标是让内容在不同空间里都能使用。遇到布局难题时，先问哪里需要弹性、哪里需要边界，再决定要不要增加一条媒体查询。