如何无需大量媒体查询，响应式将Div定位到背景图特定位置？

无需大量媒体查询的技巧 #

• 基于容器百分比定位
  将背景图容器设置为与视口同尺寸（width: 100vw; height: 100vh），背景图使用background-size: cover; background-position: center确保横竖屏都能按比例覆盖容器。给可点击div设置position: absolute，用百分比定义top、left、width、height。由于横竖版背景图是专门适配的，门在各自图中的相对比例固定，只需通过一个横竖屏媒体查询切换这组百分比值即可，不用针对每个设备尺寸写规则。

• 比例锁定容器 + 百分比定位
  创建与背景图比例一致的容器（横版如aspect-ratio: 16/9，竖版切换为aspect-ratio: 9/16），让容器在视口中居中且不超出视口范围（max-width: 100vw; max-height: 100vh; margin: auto）。背景图填满容器，可点击div基于这个比例容器用百分比定位。无论设备尺寸如何变化，容器比例与背景图一致，门的相对位置始终精准，仅需一个横竖屏媒体查询切换容器比例和定位参数。

• 使用Image Map替代div
  将背景图改为<img>标签（可设置为全屏背景样式），配合<map>和<area>标签定义门的点击区域。针对横竖版两张图分别创建对应的map，通过媒体查询切换<img>的src和usemap属性。浏览器会自动根据图片的缩放比例调整<area>的点击范围，无需手动计算定位值，仅需维护两组map坐标。

若必须使用媒体查询，最优单位选择 #

• 优先用百分比：百分比基于父容器尺寸计算，与背景图的缩放比例完全匹配，能确保门的相对位置始终精准，适配性最强。
• 其次选vw/vh：当容器为视口尺寸时，vw/vh效果与百分比接近，但如果容器有内边距、边框等布局限制，百分比的可靠性更高。
• 避免使用固定像素：像素是绝对单位，不同设备的分辨率、尺寸差异会导致定位严重偏移，除非针对特定固定尺寸设备，否则需要大量媒体查询才能覆盖，不符合需求。

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