使用相对单位（%、vw/vh、em/rem）结合Flexbox和Grid布局，可实现元素宽高自适应。通过百分比、视口单位和弹性盒子的flex属性分配空间，利用Grid的fr单位与minmax()创建响应式网格，设置图片width:100%、height:auto及aspect-ratio维持比例，整体灵活组合盒模型特性完成响应式设计。
在CSS布局中，实现元素宽高自适应是响应式设计的核心。关键在于合理利用盒模型、弹性布局和相对单位，让元素能根据容器或内容自动调整尺寸。
使用相对单位控制尺寸
避免固定像素值，改用相对单位可提升自适应能力。
- 百分比（%）：宽度设为父容器的百分比，高度也可基于包含块计算
- vw/vh：视口宽度/高度的1%，适合全屏或响应视口变化的场景
- em/rem：em相对于当前字体大小，rem相对于根元素，适合文本相关容器
- max-width/min-width：限制宽度范围，防止过度拉伸或压缩
弹性布局（Flexbox）自动分配空间
Flex容器中的子元素可自动填充可用空间，无需设定具体宽高。
- 父元素设置 display: flex，子元素默认沿主轴排列
- 使用 flex: 1 让一个或多个子元素均分剩余空间
- 结合 flex-wrap: wrap 实现换行自适应
- 高度不固定时，子元素会默认拉伸至容器高度，可通过 align-items 调整对齐方式
网格布局（Grid）构建自适应结构
Grid适合二维布局，能轻松实现行列自动调整。
GNCMS可视化拖拽公司网站模板1.0.0
下载
高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方
立即学习“前端免费学习笔记（深入）”；
- 定义列宽使用 fr 单位（如 grid-template-columns: 1fr 2fr），按比例分配空间
- 配合 auto-fit 和 minmax() 实现响应式网格：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
- 行高可设为 min-content 或 max-content，根据内容自动调整
图片与媒体元素的自适应处理
确保媒体内容在不同屏幕下正常显示。
- 设置 img { width: 100%; height: auto; } 保持比例缩放
- 使用 object-fit: cover / contain 控制图片填充方式
- 容器可设 aspect-ratio 维持宽高比，避免布局跳动
