应使用自定义媒体查询实现响应式圆角：.rounded-responsive { border-radius: 0; } @media (min-width: 768px) { .rounded-responsive { border-radius: 0.25rem; } }，配合img-fluid类确保图片不溢出容器。
用自定义媒体查询替代 Bootstrap 内置类
Bootstrap 的 .rounded、.rounded-0 等类是静态的，不随屏幕尺寸变化。想实现“小屏直角、大屏圆角”，必须写自己的 @media 规则，不能靠 class 切换或 JS 监听 resize。
-
.rounded-responsive这类自定义类名更清晰，避免和 Bootstrap 原生类冲突 - 断点建议用
min-width: 768px（对应 Bootstrap 的md），比576px（sm）更稳妥——平板横屏时不会误触发圆角 - 不要用
!important；Bootstrap 的border-radius优先级不高，直接重写即可
怎么写这段响应式圆角 CSS
把下面这段 CSS 加到你的样式表或 <style> 标签里：
.rounded-responsive {
border-radius: 0;
}
@media (min-width: 768px) {
.rounded-responsive {
border-radius: 0.25rem; /* 对应 Bootstrap .rounded 默认值 */
}
}-
0.25rem是 Bootstrap 5 的.rounded值，保持视觉一致 - 要更圆一点（比如接近
.rounded-2），改成0.5rem；要正圆，用50%，但得确保图片宽高相等 - 别漏掉
img-fluid：圆角再对，图片溢出容器也会被裁掉，看着像没生效
HTML 中怎么用才不出错
直接在 <img> 上加两个类：
<img src="photo.jpg" class="rounded-responsive img-fluid">
-
img-fluid必须存在，否则窄屏下图片可能撑破容器，圆角被截断 - 别混用
.rounded和.rounded-responsive—— 同时存在会因选择器权重或加载顺序导致不可控覆盖 - 如果图片是背景图（
div+background-image），别用这个方案；border-radius对背景图生效逻辑不同，需另配background-clip
为什么不用 Bootstrap 断点类组合
有人试过 rounded-0 rounded-md 这类写法，但 Bootstrap 没提供这种响应式工具类。所谓 “rounded-md” 并不存在，硬写只会无效。
- Bootstrap 4/5 都没内置按断点自动切换
border-radius的类 - 用 JS 监听
resize动态增删 class 性能差，且首次渲染常错位（尤其 SSR 或 hydration 场景） - 媒体查询是 CSS 原生能力，零运行时开销，首次渲染即生效，最可靠
真正容易被忽略的是 img-fluid 和图片容器的 overflow 设置——加了响应式圆角却没加 img-fluid，或者父容器有 overflow: hidden 但没预留足够内边距，圆角就会被吃掉，根本看不出效果。
