shape-outside在小屏幕易失效，因其形状值（如circle()、polygon()、url()）默认用绝对单位或固定百分比，不随响应式缩放自动调整；图片尺寸变化后，原形状参数失准，导致文字错位、断裂或掉至图下。
shape-outside 本身不响应式，必须配合媒体查询手动重置形状参数，否则小屏下文字会卡在错误位置甚至掉到图片下方。
为什么 shape-outside 在小屏幕上容易失效
shape-outside 的值（如 circle()、polygon()、url()）默认使用绝对单位或固定百分比，不随视口缩放自动调整。当图片用 max-width: 100% 响应式缩放时，其实际尺寸变了，但 shape-outside: circle(100px) 还是按 100px 计算，导致文字环绕区域严重错位。
常见现象包括：
- 文字突然从右侧“跳”到图片正下方（iOS Safari 尤其明显）
- 使用
url()时，透明 PNG 的轮廓在小屏上被压缩变形，环绕边缘毛刺或断裂 - 多边形坐标点未换算为视口单位，
polygon(0 0, 100% 0, ...)中的100%指的是图片宽高，而非容器宽高，极易失准
如何让 shape-outside 真正响应式
核心思路：用相对单位定义形状，并在断点中重新声明 shape-outside 和关键尺寸。
- 优先用
vw、vmin或基于图片宽高的计算值（如calc(50% - 1rem)），避免纯像素值 - 对
polygon()，把坐标全部转为百分比，且确保图片宽高比稳定（用aspect-ratio或padding-bottom技巧） - 对
url()形状图，提供多张分辨率适配图（如shape.png、shape@2x.png），并通过image-set()或媒体查询切换 - 在断点内必须重写整个
shape-outside声明，不能只改width—— 浏览器不会自动推导新尺寸下的等效形状
示例（适配中屏与小屏）：
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>
shape-outside + float 组合的兼容性雷区
这个组合在现代浏览器中可用，但几个关键限制常被忽略：
-
shape-outside在 Chrome 110+ 中若父容器设了contain: paint，效果直接消失 —— 不报错，也不渲染 - IE 完全不支持，Edge 18 及更早版本也无效；Safari 对
url()的 CORS 要求严格，跨域图片即使加了crossorigin也可能失败 - 所有浮动元素必须紧邻文字内容，中间插入一个空
<div></div>或<br>就会打断环绕流 -
shape-image-threshold默认是0.5，若你的 PNG 边缘有抗锯齿灰度过渡，可能需要调低（如0.3）才能准确识别轮廓
真正难的不是写出第一版环绕效果，而是每个断点下都验证「图片物理尺寸 + 形状参数 + 文字容器最小可读宽度」三者是否仍构成有效环绕空间 —— 这个关系一旦断裂，视觉就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
