用css媒体查询可实现小屏直角、大屏圆角：定义.rounded-responsive类设border-radius:0，再用@media(min-width:768px)设0.25rem圆角，配合img-fluid确保响应式缩放且不被裁剪。
用 CSS 媒体查询控制图片圆角，别依赖 Bootstrap 内置类
Bootstrap 自带的 .rounded、.rounded-0 等类是静态的，不响应屏幕尺寸变化。想实现“大屏圆角、小屏直角”，必须自己写媒体查询覆盖，不能只靠 class 切换。
直接给 <img> 加 class="rounded" 会全屏生效；想动态控制，就得用自定义类 + @media 规则。
- 推荐做法：定义一个新类（如
.rounded-responsive），在其中用@media (min-width: 768px)控制圆角仅在中屏及以上生效 - Bootstrap 的断点值要对齐：默认
sm是576px，md是768px，建议用md起始作为“大屏”分界，避免在平板横屏时就触发圆角 - 不要用
!important强行覆盖 —— Bootstrap 的.rounded优先级不高，直接重写border-radius即可
怎么写这个响应式圆角样式？
把这段 CSS 加到你的样式表里（或 <style></style> 标签中）：
.rounded-responsive {
border-radius: 0;
}
@media (min-width: 768px) {
.rounded-responsive {
border-radius: 0.25rem; /* 对应 Bootstrap 的 rounded */
}
}
然后在 HTML 中这样用：
@@##@@
-
border-radius: 0.25rem是 Bootstrap 默认.rounded的值，保持视觉一致 - 如果需要更圆（比如
.rounded-3效果），改成0.375rem；要完全圆（头像常用），用50% -
img-fluid保留，防止图片溢出容器 —— 它和圆角不冲突，但单独加才能响应式缩放
为什么不用 Bootstrap 的 rounded-sm 或 rounded-lg 配合 JS 切换？
可以，但没必要且容易出错：
- Bootstrap 没有内置 “根据屏幕尺寸自动切换 class” 的机制，得靠 JS 监听
resize，性能差、易漏触发、首次渲染可能错位 - 移动端 Safari 对频繁操作 class 的重绘优化较差，滚动时可能闪一下直角/圆角
- 媒体查询由浏览器原生处理，零 JS、零延迟、零兼容问题 —— 这是唯一推荐路径
遇到图片圆角被父容器裁剪怎么办？
常见于 <div class="card"> 或设置了 <code>overflow: hidden 的容器里。圆角本身生效了，但被父级截掉。
- 检查父元素是否含
overflow: hidden（如.card、.carousel-item），这是最常见原因 - 解决方法：给父容器也加
overflow: visible，或改用clip-path替代border-radius（但兼容性略差） - 更稳妥的做法：把
border-radius改到父容器上（如.card），再让图片宽高填满 —— 图片本身不需要圆角，容器圆角即可
响应式圆角本质是 CSS 层级和时机问题，不是 Bootstrap 功能缺失。写对媒体查询范围、避开父容器裁剪、别碰 JS 切换，这事就稳了。
