使用相对单位、媒体查询与Flexbox/Grid结合实现多屏适配：以rem、%等弹性单位为基础，通过媒体查询在不同断点调整样式，并利用flex或grid布局优化组件排列，确保跨设备一致性。
在现代网页开发中，实现多屏适配布局是确保网站在不同设备上良好显示的关键。通过结合使用CSS媒体查询和弹性单位（如rem、em、%、vw、vh），可以构建出高度响应式的页面结构。下面介绍具体实现方式。
使用相对单位提升布局灵活性
避免使用固定像素（px）定义尺寸，转而采用相对单位，使元素能根据屏幕或父容器动态调整。
- rem：相对于根元素（html）字体大小。设置html的font-size后，其他元素用rem可实现整体缩放。
- em：相对于父元素字体大小，适合局部缩放场景。
- %：常用于宽度，让元素按父容器比例伸缩。
- vw / vh：视口宽度/高度的百分之一，适合全屏布局或背景设计。
例如：
html { font-size: 16px; }.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.card { width: 45%; padding: 1rem; }
利用媒体查询针对不同屏幕断点调整样式
媒体查询允许根据设备特性（如屏幕宽度）应用不同的CSS规则。常用断点覆盖手机、平板、桌面等设备。
立即学习“前端免费学习笔记（深入）”；
常见断点设置：
- 手机竖屏：max-width: 480px
- 手机横屏/小平板：min-width: 481px and max-width: 768px
- 平板/小桌面：min-width: 769px and max-width: 1024px
- 桌面大屏：min-width: 1025px
示例代码：
@media (max-width: 480px) {
.card { width: 100%; margin-bottom: 1rem; }
nav ul { flex-direction: column; }
}
@media (min-width: 769px) {
.header { font-size: 2rem; }
.sidebar { width: 25%; }
}
结合rem与媒体查询实现可调式响应
一种高级技巧是动态调整根字体大小，配合rem实现整体布局缩放。比如在小屏幕上缩小html字体，所有rem单位自动等比缩小。
html { font-size: 16px; }@media (max-width: 375px) {
html { font-size: 14px; }
}
@media (min-width: 1200px) {
html { font-size: 18px; }
}
此时，一个设置为font-size: 1.5rem的标题，在不同屏幕下会自动适应。
辅助使用Flexbox与Grid增强布局适应性
弹性布局（Flexbox）和网格布局（Grid）天然支持响应式设计。配合媒体查询，可轻松调整排列方式。
.container {display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px; /* 最小宽度300px，可伸缩 */
}
在小屏幕上，通过媒体查询改为垂直堆叠：
@media (max-width: 480px) {.container { flex-direction: column; }
.item { width: 100%; }
}
基本上就这些。关键是将弹性单位打底 + 媒体查询微调 + 现代布局模型三者结合，就能高效实现跨设备一致体验。不复杂但容易忽略细节，比如断点选择和单位搭配。
