首先设置视口元标签，再使用相对单位、媒体查询和Flexbox/Grid布局，使页面适配不同屏幕。
在不同屏幕尺寸下实现良好的显示效果，是现代网页开发的基本要求。CSS自适应布局通过灵活的样式规则，让页面内容能自动调整结构和尺寸，适配手机、平板、桌面等设备。核心思路是根据视口大小动态响应，而不是为每种设备单独设计。
使用视口元标签控制缩放
为了让移动端浏览器正确渲染页面宽度，必须在HTML的中添加视口（viewport）元标签：
这句代码告诉移动设备：页面宽度等于设备屏幕宽度，初始缩放比例为1，避免默认缩小显示。
采用弹性布局单位
固定像素（px）不利于适配，应优先使用相对单位：
立即学习“前端免费学习笔记（深入）”；
- 百分比（%）：宽度设为父元素的百分比，容器可随父级缩放
- vw / vh：视口宽度/高度的1%，适合全屏元素或字体
- rem：相对于根元素（html）字体大小，统一调整可全局缩放
- em：相对于父元素字体，适合局部缩放场景
利用媒体查询适配断点
媒体查询（Media Queries）可根据屏幕宽度应用不同样式。常见断点参考：
/* 手机样式 */
}
@media (min-width: 769px) and (max-width: 1024px) {
/* 平板样式 */
}
@media (min-width: 1025px) {
/* 桌面样式 */
}
实际断点应根据内容布局决定，而非死记设备尺寸。比如某个布局在800px开始错位，就在此处设置调整样式。
使用Flexbox和Grid构建弹性结构
CSS Flexbox适合一维布局（行或列），Grid适合二维网格。两者都能自动分配空间，无需浮动或定位。
例如用Flex实现等分布局：
.container {display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
min-width: 250px;
}
当空间不足时，项目换行并保持最小宽度，实现响应式流式布局。
基本上就这些。关键是打好基础：设置视口、用相对单位、结合媒体查询和现代布局方式。不需要覆盖所有设备，而是让页面在任何尺寸下都可用、可读、结构合理。测试时多用浏览器开发者工具模拟不同屏幕，逐步调整细节。不复杂但容易忽略。
