拓展观察 · 窗口宽度与布局
响应式：同一内容适应不同视口
响应式不是把电脑页面整体缩小，而是按可用空间调整布局。手机适配还要检查触控、字号、溢出和横竖屏。
- viewport 元数据让移动浏览器按设备视口布局。
- 媒体查询是有条件生效的 CSS；这里以 600px 为示例断点。
- 观察窗口变窄后，下方卡片何时由三列变为一列。
- 断点由内容需要决定；模拟器辅助检查，最终仍需真机验证。
.responsive-demo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
.responsive-demo { grid-template-columns: 1fr; }
}桌面平板手机