shape-outside 本身不响应式，必须配合 float 和媒体查询重置形状参数；否则小屏下文字易掉至图下方或错位卡死。
直接说结论：shape-outside 本身不响应式，必须配合 float + 媒体查询重置形状参数，否则小屏下文字大概率掉到图下方或错位卡死。
为什么 shape-outside 在小屏上突然失效
常见现象是文字在桌面端正常环绕，一缩到手机屏就“啪”一下跳到图片正下方——尤其 iOS Safari 上特别明显。这不是 bug，而是 shape-outside 的计算基准没跟着变：
-
shape-outside: circle(100px)永远按 100px 算，不管图片缩到 80px 还是 40px -
polygon(0 0, 100% 0, 100% 100%, 0 100%)中的100%指的是图片自身宽高，不是视口；图片尺寸一变，坐标就全偏了 - 用
url(mask.png)时，透明 PNG 在小屏被等比压缩，alpha 边缘糊成锯齿，浏览器识别不出有效轮廓
必须同时满足的三个硬性条件
缺一个，shape-outside 就等于没写：
- 元素必须设
float: left或float: right（display: inline、display: flex子项、伪元素均不支持） - 必须有明确宽高：
width和height，或通过aspect-ratio锁定比例（仅靠max-width: 100%不够） - 父容器不能触发 BFC 干扰浮动流：删掉
overflow: hidden、contain: layout、display: flow-root等样式再试
响应式写法：用相对单位 + 断点重写整个声明
别指望只改 width 浏览器会自动推导新 shape-outside——它不会。必须在每个断点里完整重写：
img {
float: left;
width: 300px;
aspect-ratio: 4/3;
shape-outside: circle(50% at 50% 50%);
shape-margin: 12px;
}
<p>@media (max-width: 768px) {
img {
width: 200px;
shape-outside: circle(50% at 50% 50%); /<em> 必须重写，不可省略 </em>/
shape-margin: 8px;
}
}</p><p>@media (max-width: 480px) {
img {
float: none;
width: 100%;
shape-outside: none; /<em> 小屏直接关闭，比错位强 </em>/
}
.text-container { clear: both; }
}</p>
关键点：
- 优先用
%、vw、vmin，避免纯px；circle(50%)比circle(150px)更安全 - 对
polygon()，所有坐标统一用%，且确保图片宽高比稳定（aspect-ratio或padding-bottom技巧） - 用
url()时，本地开发别用file://协议——跨域限制会导致加载失败
Firefox 下容易翻车的细节
Firefox 对 shape-outside 更严格，尤其在单位精度上：
- 用
em/rem动态算inset()或circle()，可能被截断为整数，导致文字突然贴边 - SVG 路径里的小数坐标（如
d="M10.3,20.7"）在 Firefox 里会被四舍五入，建议导出前转成整数 - 兜底方案：
shape-margin: 2px在所有浏览器都稳定，比硬调inset()更可靠
真正难调的从来不是语法，而是浮动区域高度塌陷 + 小屏下形状失准的组合问题——这时候别硬扛，该关就关，文字可读性永远比视觉花活重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
