响应式容器尺寸调整：利用 CSS 媒体查询实现屏幕方向自适应-js教程-PHP中文网

本文介绍如何通过 CSS @media (orientation: landscape/portrait) 实现容器在屏幕旋转或窗口缩放时自动调整宽高，替代不可靠的 JavaScript 尺寸监听，提升兼容性与性能。

本文介绍如何通过 css `@media (orientation: landscape/portrait)` 实现容器在屏幕旋转或窗口缩放时自动调整宽高，替代不可靠的 javascript 尺寸监听，提升兼容性与性能。

在实际开发中，尤其在受限环境（如低代码平台、嵌入式应用或移动端 WebView）中，JavaScript 事件监听能力可能受限——例如无法直接绑定 resize 或 orientationchange 事件，或事件触发不及时、不一致。此时，依赖 JavaScript 动态读取 clientWidth/clientHeight 并手动设置容器尺寸（如原代码中 container.set('width', 600)）不仅耦合度高、维护成本大，还易受渲染时机、设备 API 差异（如 iOS Safari 对 orientationchange 的废弃支持）影响，导致旋转后尺寸未更新。

推荐方案：使用 CSS 媒体查询中的 orientation 特性
该特性由浏览器原生支持，无需 JavaScript 监听，响应迅速且零延迟。它根据视口逻辑方向（而非设备物理方向）判断当前为 portrait（高度 ≥ 宽度）或 landscape（宽度 > 高度），完美覆盖桌面窗口缩放、平板翻转、手机横竖屏切换等所有场景。

✅ 正确用法示例：

/* 默认样式：按竖屏（portrait）设计 */
.responsive-container {
  width: 220px;
  height: 400px;
  border: 1px solid #333;
  transition: all 0.2s ease; /* 可选：添加平滑过渡 */
}

/* 横屏（landscape）下覆盖尺寸 */
@media (orientation: landscape) {
  .responsive-container {
    width: 600px;
    height: 300px;
  }
}

<div class="responsive-container" id="Container_Name"></div>

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

不要混用 JS 设置内联样式：若容器已有 style="width: 220px;" 等硬编码样式，会覆盖 CSS 规则。请确保尺寸完全由 CSS 控制（移除 container.set('width', ...) 类调用）；
适配初始化逻辑：原 OnShow 中的 JS 代码可精简为仅处理非尺寸类逻辑（如数据加载、动画启动），尺寸交由 CSS 全权管理；
兼容性保障：orientation 媒体特性在所有现代浏览器（Chrome、Firefox、Safari、Edge）及 iOS/Android WebView 中均稳定支持；
进阶提示：如需更精细控制（如区分 min-width 或设备像素比），可组合使用 @media (orientation: portrait) and (min-width: 768px)。

总结：放弃手动监听 resize 或已弃用的 orientationchange 事件，转向声明式 CSS 媒体查询，是更轻量、更可靠、更符合 Web 标准的响应式实践。只需为容器添加对应类名，并定义两套 CSS 尺寸规则，即可实现“一次编写，全场景生效”。