答案：CSS Grid结合Media Query可实现多屏适配，通过grid-template-columns与auto-fit构建弹性布局，在768px和480px断点用media query调整列数，利用grid-area重排内容，配合max-width和display:none优化图像与小屏体验。
使用 CSS Grid 与 Media Query 结合，可以高效实现多屏适配布局。Grid 提供强大的二维布局能力，而 Media Query 能根据设备屏幕尺寸动态调整样式，两者配合能让页面在不同设备上都保持良好的视觉效果和可用性。
使用 CSS Grid 构建基础布局
CSS Grid 允许你定义行、列和区域，快速搭建响应式结构。先为不同屏幕设计一个灵活的网格容器：
display: grid; 启用网格布局，结合 fr、minmax() 和 auto-fit 等单位让列自动适应容器宽度。例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
这个设置表示：每列最小 250px，最大 1fr，当容器变窄时自动换行，适合从桌面到平板的过渡。
立即学习“前端免费学习笔记（深入）”；
通过 Media Query 调整断点布局
在关键屏幕宽度处使用 Media Query 微调网格结构。常见断点包括：768px（平板）、480px（手机）。
示例：
/* 桌面端：三列 */
.container {
grid-template-columns: 1fr 1fr 1fr;
}
<p>/<em> 平板：双列 </em>/
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}</p><p>/<em> 手机：单列 </em>/
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
也可以针对特定设备调整 gap 或隐藏某些子元素，提升小屏体验。
结合 grid-area 实现区域重排
利用 grid-area 和 grid-template-areas，可以在不同屏幕下重新排列内容顺序，而不改变 HTML 结构。
比如：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
<p>@media (max-width: 600px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}</p><p>.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
手机上侧边栏移到主内容后，更符合阅读习惯。
优化图像与内容自适应
Grid 子项中的内容也需适配。建议：
- 图片设置 max-width: 100%，避免溢出
- 文字使用相对单位（如 rem）
- 隐藏非关键元素（display: none）节省小屏空间
例如在小屏下隐藏辅助侧边栏：
@media (max-width: 480px) {
.sidebar {
display: none;
}
}
基本上就这些。Grid 提供结构弹性，Media Query 控制断点变化，合理组合就能覆盖多数设备场景，实现真正响应式的多屏适配。不复杂但容易忽略细节，比如断点选择和内容优先级。
