css自适应布局的核心目标是让网页内容能够根据设备屏幕的尺寸、分辨率自动调整展示效果，避免出现内容溢出、排版错乱等问题，提升不同设备用户的浏览体验。
常用自适应布局方法
1. 媒体查询适配不同断点
媒体查询是css自适应布局的基础手段，它可以根据设备的屏幕宽度、分辨率等特征应用不同的样式规则，开发者可以预设多个断点，针对不同区间的屏幕设置对应的布局样式。
以下是一个简单的媒体查询示例，针对小屏手机、平板、桌面设备分别设置不同的容器宽度：
/* 默认样式，适配小屏手机 */
.container {
width: 100%;
padding: 10px;
}
/* 平板设备，屏幕宽度大于等于768px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}
/* 桌面设备，屏幕宽度大于等于1200px */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
padding: 30px;
}
}
2. 使用flex弹性布局
flex布局是css3引入的一维布局模型，它可以让容器内的子元素自动分配空间、调整排列顺序，非常适合处理不同屏幕下的元素排列问题，不需要复杂的计算就能实现自适应效果。
以下示例实现了一个导航栏在小屏下垂直排列，大屏下水平排列的效果：
.nav {
display: flex;
flex-direction: column; /* 默认垂直排列，适配小屏 */
gap: 10px;
padding: 15px;
}
.nav-item {
padding: 8px 15px;
background-color: #f0f0f0;
text-align: center;
}
/* 屏幕宽度大于等于768px时改为水平排列 */
@media screen and (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
}
}
3. 百分比与视口单位适配
使用百分比作为宽度单位，元素的大小会相对于父容器自动调整，而视口单位vw、vh则是相对于视口的宽度和高度进行计算，这两种方式都可以实现元素尺寸随屏幕变化的效果。
以下是一个使用百分比和vw单位的示例：
/* 宽度占父容器的90%，随父容器变化 */
.box {
width: 90%;
margin: 0 auto;
}
/* 字体大小随视口宽度变化，1vw等于视口宽度的1% */
.text {
font-size: 4vw;
}
/* 高度占视口高度的50% */
.banner {
height: 50vh;
background-color: #e8e8e8;
}
4. rem单位适配
rem是相对于根元素html字体大小的单位，开发者可以通过动态设置根元素的字体大小，让所有使用rem单位的元素按比例缩放，常用于移动端适配场景。
以下示例通过js动态计算根元素字体大小，实现不同屏幕下的等比缩放：
// 设置根元素字体大小，以设计稿宽度750px为例，1rem等于75px
function setRootFontSize() {
const designWidth = 750;
const rootFontSize = (document.documentElement.clientWidth / designWidth) * 100;
document.documentElement.style.fontSize = rootFontSize + 'px';
}
// 初始化设置
setRootFontSize();
// 屏幕尺寸变化时重新计算
window.addEventListener('resize', setRootFontSize);
对应的css样式可以这样写：
/* 设计稿中元素宽度为300px，换算为rem就是300/75=4rem */
.card {
width: 4rem;
height: 3rem;
margin: 0.2rem auto;
background-color: #fff;
border-radius: 0.1rem;
}
不同方法的适用场景
| 方法 | 适用场景 | 优势 |
|---|---|---|
| 媒体查询 | 需要针对不同断点设置完全不同的布局样式 | 控制精准，可针对不同设备定制样式 |
| flex布局 | 一维方向的元素排列、空间分配 | 代码简洁，适配性好，不需要复杂计算 |
| 百分比/视口单位 | 元素尺寸需要随屏幕直接变化，不需要固定断点 | 实现简单，适配连续变化的屏幕尺寸 |
| rem单位 | 移动端等比缩放适配 | 整体缩放比例统一，还原设计稿效果好 |
注意事项
- 不要设置固定的像素宽度给主要布局容器，尽量使用相对单位或者自适应布局方案。
- 媒体查询的断点设置要符合主流设备的屏幕尺寸，不要设置过多无意义的断点。
- 测试时要覆盖手机、平板、桌面等不同尺寸的设备，确保布局在各种场景下都正常。
- 图片也要做自适应处理，设置
max-width: 100%避免图片溢出容器。
实际开发中通常会结合多种方法使用，比如用媒体查询设置整体布局断点，用flex布局处理内部元素排列，用rem单位处理字体和间距，这样才能更高效地实现适配不同屏幕的需求。