移动端设备的屏幕尺寸跨度极大，从4英寸的小屏手机到7英寸以上的平板，css布局需要适配不同尺寸的显示区域，才能保证所有用户获得一致的浏览体验。实现移动端布局自适应的核心是从视口设置、单位选择、布局方案三个层面入手，结合不同场景选择合适的实现方式。
基础：设置正确的视口
移动端浏览器默认会将页面渲染在980px左右的虚拟视口中，导致页面被缩小显示，因此首先需要设置<meta>视口标签，让页面宽度匹配设备宽度，禁止用户缩放干扰布局。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段配置的作用是让视口宽度等于设备物理宽度，初始缩放比例为1，最大缩放比例为1，同时禁止用户手动缩放，为后续布局自适应打下基础。
使用相对单位替代固定像素
固定像素（px）在不同密度的屏幕下会出现显示大小不一致的问题，因此移动端布局应优先使用相对单位：
- rem：相对于根元素
<html>的字体大小，通过设置根字体大小与屏幕宽度的比例关系，可实现整体布局随屏幕缩放 - vw/vh：相对于视口宽高的百分比，1vw等于视口宽度的1%，无需额外计算根字体大小，适配更直接
- %：相对于父元素的尺寸比例，适合容器宽度的自适应设置
rem适配示例
可以通过js动态计算根字体大小，也可以借助css的calc函数实现：
/* 假设设计稿宽度为750px，根字体大小设为屏幕宽度的1/10 */
html {
font-size: calc(100vw / 10);
}
/* 设计稿上宽度为200px的元素，转换为rem为20rem */
.box {
width: 20rem;
height: 10rem;
background: #f0f0f0;
}
vw适配示例
vw单位无需依赖根元素设置，直接使用即可：
/* 设计稿宽度750px，200px对应200/750*100=26.6667vw */
.container {
width: 100vw;
padding: 2.6667vw;
}
.card {
width: 46.6667vw;
margin-right: 2.6667vw;
}
优先使用flex弹性布局
flex布局是移动端自适应布局的首选方案，它可以通过弹性分配空间，自动适配不同宽度的容器，无需手动计算尺寸。
flex常用属性说明
| 属性 | 作用 |
|---|---|
| display: flex | 将容器设置为flex容器 |
| flex-direction | 设置主轴方向，row为水平排列，column为垂直排列 |
| justify-content | 设置主轴方向的元素对齐方式，space-between可让元素两端对齐，中间留空 |
| flex-wrap | 设置元素是否换行，wrap允许元素在空间不足时换行 |
| flex: 1 | 子元素设置该属性后，会平分剩余空间 |
flex自适应示例
实现一个两列布局，左侧固定宽度，右侧自适应剩余空间：
.wrap {
display: flex;
height: 50px;
}
.left {
width: 60px;
background: #409eff;
}
.right {
flex: 1;
background: #67c23a;
}
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧自适应</div>
</div>
媒体查询适配特殊场景
当不同尺寸区间的布局差异较大时，可以结合媒体查询做针对性调整：
/* 小屏手机（宽度小于375px）调整字体大小 */
@media screen and (max-width: 374px) {
.title {
font-size: 14px;
}
}
/* 平板设备（宽度大于768px）调整列数 */
@media screen and (min-width: 768px) {
.list {
flex-wrap: wrap;
}
.list-item {
width: 33.3333%;
}
}
注意事项
- 图片需要设置
max-width: 100%，避免超出容器宽度 - 避免使用固定高度的容器，优先使用内容撑开高度，适配不同内容量的场景
- 测试时需要覆盖主流尺寸区间，包括小屏手机、大屏手机、平板等不同设备