在前端页面开发中，我们经常需要根据屏幕尺寸调整元素样式，常规媒体查询基于整个视口的宽度或高度触发，当需要对单个DIV元素单独应用响应式规则时，常规媒体查询无法直接实现，需要采用模拟的方式达成目标。
方案一：使用CSS容器查询
CSS容器查询是原生支持的针对容器尺寸触发样式变更的特性，不需要额外编写JavaScript代码，兼容性较好的现代浏览器都已支持该特性。
实现步骤
- 首先需要为目标DIV元素声明容器类型，通过
container-type属性定义容器基于宽度还是高度进行查询 - 使用
@container规则编写针对该容器的响应式样式，语法和常规媒体查询类似 - 容器查询的断点基于容器自身的尺寸，而不是视口尺寸
代码示例
/* 定义目标DIV为宽度容器 */
.target-div {
container-type: inline-size;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
/* 基于容器宽度应用不同样式 */
@container (min-width: 600px) {
.target-div .inner-content {
font-size: 20px;
color: #ff0000;
}
}
@container (max-width: 599px) {
.target-div .inner-content {
font-size: 14px;
color: #0000ff;
}
}
方案二：使用JavaScript监听尺寸变化
如果需要兼容不支持容器查询的旧版本浏览器，或者需要更复杂的尺寸判断逻辑，可以使用JavaScript监听DIV元素的尺寸变化，动态添加对应的样式类。
实现原理
使用ResizeObserver API监听目标DIV的尺寸变化，当尺寸发生变化时，根据预设的断点规则为元素添加或移除对应的类名，再通过CSS类控制样式。
代码示例
// 获取目标DIV元素
const targetDiv = document.querySelector('.target-div');
// 定义断点规则
const breakpoints = [
{ maxWidth: 599, className: 'small' },
{ minWidth: 600, className: 'large' }
];
// 创建尺寸监听实例
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const width = entry.contentRect.width;
// 移除所有断点相关类
targetDiv.classList.remove('small', 'large');
// 匹配对应的断点类
for (const bp of breakpoints) {
if ((bp.minWidth === undefined || width >= bp.minWidth) &&
(bp.maxWidth === undefined || width <= bp.maxWidth)) {
targetDiv.classList.add(bp.className);
break;
}
}
}
});
// 开始监听目标元素
resizeObserver.observe(targetDiv);
对应的CSS样式代码如下：
.target-div {
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.target-div.small .inner-content {
font-size: 14px;
color: #0000ff;
}
.target-div.large .inner-content {
font-size: 20px;
color: #ff0000;
}
两种方案对比
| 对比维度 | CSS容器查询 | JavaScript监听方案 |
|---|---|---|
| 兼容性 | 现代浏览器支持，旧浏览器不支持 | 兼容所有支持ResizeObserver的浏览器，可降级处理 |
| 实现复杂度 | 低，仅需CSS代码 | 中等，需要编写JS逻辑 |
| 性能 | 浏览器原生优化，性能更好 | 需要JS执行，频繁resize时可能有性能开销 |
| 适用场景 | 现代浏览器项目，简单容器响应式需求 | 需要兼容旧浏览器，复杂尺寸判断逻辑 |
注意事项
- 使用容器查询时，父元素不能设置
overflow: hidden等可能影响容器尺寸计算的属性，否则可能导致查询失效 - 使用ResizeObserver时，需要注意在组件销毁时停止监听，避免内存泄漏
- 如果目标DIV的尺寸会动态变化，两种方案都能实时响应，不需要额外处理
CSS媒体查询JavaScriptcontainer_queries修改时间：2026-06-09 16:45:27