使用相对单位、Flexbox和Grid布局可实现CSS宽高自适应。百分比、vw/vh、auto配合flex、grid属性让元素根据内容或视口自动调整，图片设width:100% height:auto保持比例，结合minmax()等函数增强响应性，注意box-sizing和overflow影响。
在CSS中实现元素的宽高自适应，关键在于合理使用尺寸属性和布局方式，让元素能根据内容、父容器或屏幕尺寸自动调整大小。以下是几种常用方法：
1. 使用 width 和 height 的相对单位
避免固定像素值，改用相对单位可以让元素更灵活地适应不同环境。
- 百分比（%）：相对于父元素的宽度或高度。例如 width: 100% 表示占满父容器的宽度。
- vw / vh：视口宽度/高度的百分之一。比如 width: 50vw 表示元素宽度为视口宽度的一半。
- auto：让浏览器自动计算宽高，常用于块级元素或配合 margin 居中布局。
2. 利用弹性布局（Flexbox）
Flex 容器中的子元素可以自动伸缩以填充可用空间。
display: flex; 后，可通过以下方式控制自适应：- flex-grow：定义元素放大比例，默认为0（不放大）。
- flex-shrink：定义元素缩小比例。
- flex-basis：设置初始主轴尺寸，可配合 grow/shrink 实现动态调整。
例如：flex: 1 可使所有子项平分剩余空间。
立即学习“前端免费学习笔记（深入）”；
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
3. 使用网格布局（Grid）
CSS Grid 提供了强大的二维自适应能力。
- grid-template-columns: 1fr 2fr：将容器分为两列，第二列是第一列的两倍宽，自动适应容器大小。
- minmax() 结合 grid 使用，如 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，实现响应式等分布局。
4. 图片或媒体元素的自适应处理
对图片、视频等替换元素，需特别设置：
img {width: 100%;
height: auto;
}
这样图片会随容器变小而缩放，同时保持原始宽高比，避免变形。
基本上就这些。选择合适的方法取决于布局结构和设计需求。灵活运用百分比、Flexbox 和 Grid 是实现宽高自适应的核心。不复杂但容易忽略细节，比如 overflow 或 box-sizing 对自适应的影响，也要注意检查。
