网页HTML编辑器中，如何让Div充当设备视口并被媒体查询识别？

原生CSS媒体查询是基于浏览器窗口视口工作的，没法直接把单个div识别为视口，但可以用以下两种方案实现你的需求：

方案一：CSS容器查询（推荐） #

这是目前最贴合需求的方案，主流浏览器已支持，无需iframe，直接基于div的尺寸应用样式，方便你在容器内添加行列元素。

步骤： #

1. 给目标容器设置容器查询属性

#device-width {
  width: 430px;
  height: 932px;
  container-type: inline-size; /* 让容器基于自身宽度触发查询 */
  container-name: device-viewport; /* 可选，命名容器方便精准匹配 */
  overflow: auto; /* 内容超出时滚动，模拟设备视口的滚动行为 */
}

2. 针对容器尺寸编写样式规则
   内部可编辑内容的样式直接用@container替代@media，规则写法和媒体查询一致：

/* 匹配宽度≤430px的容器（移动端） */
@container device-viewport (max-width: 430px) {
  .editable-content .row {
    flex-direction: column;
    gap: 12px;
  }
  .editable-content .text {
    font-size: 16px;
  }
}

/* 匹配宽度≥768px的容器（平板端） */
@container device-viewport (min-width: 768px) {
  .editable-content .row {
    flex-direction: row;
    gap: 24px;
  }
  .editable-content .text {
    font-size: 18px;
  }
}

3. 调整HTML结构，放入可编辑内容

<div id="page-view" class="mobile">
  <div id="device-width" style="width: 430px; height: 932px;">
    <div class="editable-content" contenteditable="true">
      <!-- 这里是用户编辑的HTML内容，比如行列元素 -->
      <div class="row">
        <div class="text">测试行内容1</div>
        <div class="text">测试行内容2</div>
      </div>
    </div>
  </div>
</div>

方案二：JS辅助动态切换样式 #

如果需要兼容老旧浏览器，可以用JS监听容器尺寸变化，给内部内容添加对应设备类，再通过类选择器编写样式。

步骤： #

1. 编写JS逻辑监听尺寸变化

// 更新内容的视口类
function updateViewportStyle() {
  const container = document.getElementById('device-width');
  const content = container.querySelector('.editable-content');
  const containerWidth = container.offsetWidth;

  // 移除旧的视口类
  content.classList.remove('mobile-view', 'tablet-view', 'desktop-view');

  // 根据容器宽度添加对应类
  if (containerWidth <= 430) {
    content.classList.add('mobile-view');
  } else if (containerWidth <= 768) {
    content.classList.add('tablet-view');
  } else {
    content.classList.add('desktop-view');
  }
}

// 初始化执行
updateViewportStyle();
// 若容器尺寸通过交互修改（比如切换设备预设），修改后调用此函数
// 示例：切换到平板尺寸时
document.querySelector('.switch-to-tablet').addEventListener('click', () => {
  document.getElementById('device-width').style.width = '768px';
  updateViewportStyle();
});

2. 编写对应类的样式

.mobile-view .row {
  flex-direction: column;
  gap: 12px;
}
.mobile-view .text {
  font-size: 16px;
}

.tablet-view .row {
  flex-direction: row;
  gap: 24px;
}
.tablet-view .text {
  font-size: 18px;
}

.desktop-view .row {
  flex-direction: row;
  gap: 32px;
}
.desktop-view .text {
  font-size: 20px;
}

内容的提问来源于stack exchange，提问作者phpcoder