实现多屏响应式布局需结合CSS媒体查询、弹性单位与现代布局技术。首先通过媒体查询按视口宽度设置断点，适配手机、平板及桌面设备；其次采用rem、%、fr等相对单位提升尺寸灵活性，配合根字体调整实现整体缩放；再利用Flexbox在不同断点下控制容器方向与换行，实现卡片堆叠或横向分布；最后使用CSS Grid结合auto-fit与minmax()创建自适应二维网格，无需额外断点即可动态调整列数。三者协同可构建全设备兼容的响应式界面。
要实现多屏响应式布局，关键是结合CSS媒体查询（Media Queries）与弹性单位（如rem、em、%、flex和fr）。这种方法能确保页面在不同设备上都具备良好的可读性和可用性。
使用媒体查询适配不同屏幕尺寸
媒体查询允许你根据设备的视口宽度、高度、方向等条件应用不同的样式。最常用的是基于视口宽度进行断点划分。
常见断点参考：
- 手机竖屏： max-width: 480px
- 手机横屏/小平板： min-width: 481px 和 max-width: 768px
- 平板/大屏手机： min-width: 769px 和 max-width: 1024px
- 桌面端： min-width: 1025px
示例代码：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {body { font-size: 14px; }
.container { width: 100%; padding: 10px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.container { width: 90%; margin: 0 auto; }
}
@media (min-width: 1025px) {
.container { width: 80%; max-width: 1200px; margin: 0 auto; }
}
采用弹性单位提升布局灵活性
固定像素（px）不利于响应式设计，应优先使用相对单位，使元素尺寸随上下文或视口变化而调整。
- %： 相对于父容器的宽度，适合宽度设置
- rem： 相对于根元素（html）字体大小，统一控制整体缩放
- em： 相对于当前元素或父元素字体大小，适合局部缩放
- fr： 网格布局中可用的自由空间比例单位
- flex： 弹性盒子中定义子元素伸缩比例
例如设置根字体：
html {font-size: 16px;
}
@media (max-width: 480px) {
html { font-size: 14px; }
}
这样所有使用rem的元素会自动按比例调整。
结合Flexbox实现自适应结构
Flex布局天然支持响应式，配合媒体查询可轻松实现多屏对齐与换行。
示例：一个在小屏堆叠、大屏横向排列的卡片布局
.card-container {display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 769px) {
.card-container {
flex-direction: row;
flex-wrap: wrap;
}
.card { flex: 1 1 30%; }
}
卡片在小屏垂直排列，在平板及以上横向分布并自动换行。
使用CSS Grid处理复杂网格布局
Grid布局适合二维响应式设计，结合fr和minmax()可创建自适应网格。
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
这行代码表示：每列最小250px，最大1fr，容器自动安排列数。屏幕越宽，显示列越多，无需额外媒体查询。
基本上就这些。媒体查询负责断点控制，弹性单位让尺寸更灵活，Flexbox和Grid提供现代布局能力。三者结合，就能构建真正适配手机、平板到桌面的响应式界面。
