如何让绝对定位元素实现响应式，是否需要使用大量媒体查询？

布局思路可行性与优化 #

你原有的思路是可行的，只需要做几个小调整就能解决文本冲突、位置适配的问题：

• 不需要靠左侧容器的margin/padding硬避让元素重叠：给左侧文本容器设置position: relative; z-index: 2，前景图元素z-index: 1，就算有少量重叠也会保证文本在上，不会被遮挡，适配不同屏幕宽度时兼容性更好。
• 媒体查询中调整两个绝对定位元素的位置时，优先用固定的rem/px值代替百分比，避免不同屏幕宽度下百分比计算出的偏移量波动过大，位置失控。
• 补充右侧grid容器的溢出隐藏设置overflow: hidden，避免弧形背景超出容器范围。
• 修正你现有代码中的笔误：grid-rows: span 1 应为 grid-row: span 1。

弧形背景实现方案选型 #

不同方案的适用场景如下，优先级从高到低排序：

1. 内联SVG：最优选择，无需额外HTTP请求，可自由调整填充色、适配深色模式，拉伸不会模糊，复杂弧形也能轻松实现，维护成本最低。
2. CSS border-radius/伪类实现：仅适用于弧形样式非常简单的场景（比如只有单个大圆角），不需要引入外部资源，调整也很方便，缺点是复杂弧形实现起来代码冗余高，不好维护。
3. IMG标签/背景图：适合弧形样式完全固定、不需要动态修改的场景，要注意装饰性图片设置空alt属性，避免影响无障碍读取，缺点是修改样式需要替换图片资源，拉伸容易出现模糊。

代码优化建议 #

给你现有代码补充几个可优化的属性：

/* 给右侧grid容器加溢出隐藏 */
.col-x2-grid div:nth-child(2) {
  overflow: hidden;
}
/* 给弧形背景图加适配属性，避免变形溢出 */
.shape-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 给左侧文本加层级 */
.col-x2-grid div:nth-child(1) {
  position: relative;
  z-index: 2;
}

内容的提问来源于stack exchange，提问作者bleenwithcream