实现多屏适配需结合CSS Flexbox与Media Query。首先使用display: flex创建弹性容器，通过flex-wrap允许换行，设置flex: 1 1 200px使子元素可伸缩；再利用Media Query定义不同断点：在max-width: 480px时设flex-direction: column实现手机垂直布局，481px至768px间调整flex为50%实现平板两列，769px以上设min-width 250px适配桌面；同时采用box-sizing: border-box、gap间距、max-width: 100%等优化细节，确保各设备显示效果。
实现多屏适配的关键在于利用 CSS Flexbox 构建灵活的布局结构，并结合 Media Query 根据不同屏幕尺寸调整样式。这种方式无需依赖框架，原生支持响应式设计，适用于从手机到桌面的各种设备。
使用 Flexbox 创建弹性布局
Flexbox 能让容器内的子元素自动适应空间变化，是响应式布局的基础。
关键属性说明：
- display: flex;：启用弹性布局，子元素沿主轴排列
- flex-direction：控制排列方向（row 横向，column 纵向）
- flex-wrap: wrap：允许子元素换行，避免溢出
- flex: 1 或 flex: 1 1 200px：设置子元素伸缩性，自动分配剩余空间
- justify-content 和 align-items：控制对齐方式
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 200px; / 最小宽度约200px，可伸缩 /
}
通过 Media Query 适配不同屏幕
Media Query 可根据视口宽度应用不同的 CSS 规则，配合 Flexbox 实现精准控制。
常用断点建议：
- 手机竖屏：max-width: 480px
- 平板横屏：min-width: 481px 且 max-width: 768px
- 桌面端：min-width: 769px
实际用法：
/* 手机：垂直堆叠 */
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.item {
flex: 1 1 100%;
}
}
/ 平板：每行两列 /
@media (min-width: 481px) and (max-width: 768px) {
.item {
flex: 1 1 calc(50% - 8px);
}
}
/ 桌面：自由伸缩，每项最小250px /
@media (min-width: 769px) {
.item {
flex: 1 1 250px;
}
}
优化细节提升体验
仅靠基础设置可能不够，需关注实际显示效果。
- 使用 box-sizing: border-box 统一盒模型计算方式
- 添加 gap 属性控制间距，比 margin 更易管理
- 避免固定宽高，优先使用 min-width、max-width
- 图片和媒体内容设置 max-width: 100% 防止溢出
基本上就这些，不复杂但容易忽略。
