首先设置视口元标签，再使用相对单位、媒体查询和Flexbox/Grid布局，使页面适配不同屏幕。

在不同屏幕尺寸下实现良好的显示效果，是现代网页开发的基本要求。CSS自适应布局通过灵活的样式规则，让页面内容能自动调整结构和尺寸，适配手机、平板、桌面等设备。核心思路是根据视口大小动态响应，而不是为每种设备单独设计。

使用视口元标签控制缩放

为了让移动端浏览器正确渲染页面宽度，必须在HTML的中添加视口（viewport）元标签：

这句代码告诉移动设备：页面宽度等于设备屏幕宽度，初始缩放比例为1，避免默认缩小显示。

采用弹性布局单位

固定像素（px）不利于适配，应优先使用相对单位：

• 百分比（%）：宽度设为父元素的百分比，容器可随父级缩放
• vw / vh：视口宽度/高度的1%，适合全屏元素或字体
• rem：相对于根元素（html）字体大小，统一调整可全局缩放
• em：相对于父元素字体，适合局部缩放场景

利用媒体查询适配断点

媒体查询（Media Queries）可根据屏幕宽度应用不同样式。常见断点参考：

实际断点应根据内容布局决定，而非死记设备尺寸。比如某个布局在800px开始错位，就在此处设置调整样式。

使用Flexbox和Grid构建弹性结构

CSS Flexbox适合一维布局（行或列），Grid适合二维网格。两者都能自动分配空间，无需浮动或定位。

例如用Flex实现等分布局：

当空间不足时，项目换行并保持最小宽度，实现响应式流式布局。

基本上就这些。关键是打好基础：设置视口、用相对单位、结合媒体查询和现代布局方式。不需要覆盖所有设备，而是让页面在任何尺寸下都可用、可读、结构合理。测试时多用浏览器开发者工具模拟不同屏幕，逐步调整细节。不复杂但容易忽略。