width和height属性默认单位是像素，写成百分比需父元素有明确宽度，否则可能塌陷；响应式必须配合css容器布局，纯属性值无法适配屏幕变化。
直接用 width 和 height 属性设像素值最稳，别只靠 CSS；但若要响应式，必须配合容器级 CSS 布局，否则百分比会失效或错乱。
width 和 height 属性到底认什么单位
这两个属性默认单位是像素，width="640" 就是 640px，height="360" 就是 360px。写成 width="100%" 也合法，但它的“100%”是相对于父元素的宽度计算——前提是父元素有明确宽度（比如设置了 width: 800px 或 max-width: 100%），否则可能塌陷为 0。
- 不写单位 = 像素，这是 HTML 标准行为，所有浏览器都一致
-
width="100%"在 flex 容器或某些 display: contents 父级下可能失效 - 百分比值在 iframe 初次加载时才计算一次，后续父容器尺寸变化不会自动重算
为什么只写 width/height 属性还不够
因为现代布局常要求响应式，而纯属性值无法适配屏幕缩放、横竖屏切换或流体容器。例如：<iframe src="..." width="100%" height="450"></iframe> 在手机上会横向溢出。
- 必须用 CSS 包一层容器，比如
.responsive-iframe-container，靠padding-bottom锁定宽高比 - iframe 自身要设
position: absolute+width: 100%; height: 100%，才能填满容器 - 如果忘了给容器设
position: relative，绝对定位的 iframe 会脱离上下文乱飘
常见错误：CSS 覆盖了 width/height 属性却没处理好继承
很多人写 <iframe width="100%" height="360" style="width: 100%; height: auto;"></iframe>，结果 iframe 拉得又宽又矮——这是因为 height: auto 不会按比例缩放，它只按内容高度撑开，而 iframe 内容还没加载完时高度是 0。
- CSS 的
width/height会完全覆盖 HTML 属性，属性值仅作 fallback 用 -
aspect-ratio: 16 / 9是个好选择，但 Safari 15.4 以下不支持，得用padding-bottom回退 - 设
display: block能干掉 iframe 默认的 inline 基线间隙，避免底部多出几像素空白
同源时想动态调高度？别碰 width/height 属性
如果 iframe 和主页面同源，可以用 JS 读取其 contentDocument.body.scrollHeight 并设置 iframe.style.height，这时必须用内联样式或 class 控制，不能依赖 height 属性——属性是静态的，JS 改不了它。
- 改
iframe.height属性（注意不是iframe.style.height）在部分浏览器里无效 - 推荐统一走
iframe.style.height = scrollHeight + "px"，并加防抖避免频繁重排 - 非同源场景下，
scrollHeight读不到，只能靠 postMessage 协商，此时 width/height 属性更不可靠
真正麻烦的是混合场景：既要支持老浏览器，又要兼容 CSS-in-JS 框架，还要应对 iframe 加载慢导致的布局抖动。这时候 width 和 height 属性就不是“够用”，而是“必须留着当兜底”。
