移动端自适应需设置viewport元标签，使用百分比、flex布局和媒体查询，结合rem、vw等相对单位，使页面在不同屏幕下灵活伸缩并保持良好排版。
移动端自适应的关键在于让页面在不同尺寸的屏幕上都能合理展示，CSS布局要灵活、可伸缩。核心思路是根据设备屏幕动态调整元素尺寸和排列方式。
使用视口（viewport）元标签
确保在HTML中添加正确的viewport设置，让浏览器知道如何控制布局尺寸：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这句代码告诉移动设备以设备宽度为布局宽度，并设置初始缩放比例为1，避免默认缩放导致页面显示过小。
采用流式布局（百分比宽度）
避免使用固定像素宽度，改用百分比或相对单位，使元素随屏幕变化而自动调整：
立即学习“前端免费学习笔记（深入）”；
- 宽度设置为百分比：如width: 100%; 或 width: 50%;，容器会根据父元素或屏幕宽度自动伸缩。
- 配合 max-width 限制最大宽度：防止在大屏上元素过宽，例如：max-width: 800px;
使用Flexbox弹性布局
Flex布局天然适合移动端自适应，能轻松实现等分布局、垂直居中、自动换行等效果：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1; /* 平均分配空间 */
min-width: 100px; /* 设置最小宽度触发换行 */
}
当屏幕变窄时，项目会自动换行，保持良好排版。
利用CSS媒体查询（Media Queries）
针对不同屏幕尺寸应用不同的样式规则：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.item {
width: 100%;
}
}
比如在小屏幕上将横向排列改为纵向堆叠，提升可读性和操作便利性。
使用相对单位（rem、vw、vh）
替代固定像素值，提升可伸缩性：
- rem：相对于根字体大小（通常html为16px），可通过JS动态调整根字体实现整体缩放。
- vw/vh：视窗宽度/高度的1%，如width: 90vw; 表示占屏幕宽度的90%。
基本上就这些方法组合使用，就能实现良好的移动端自适应效果。关键是灵活布局 + 响应式断点 + 相对单位。不复杂但容易忽略细节。
