基于父元素设置CSS坐标：解决游戏关卡编号屏幕适配移位问题

• 采用百分比定位：将关卡编号的top/left属性值，替换为基于地图容器宽高的百分比。计算方式为：(目标点原始X坐标 / 地图原始宽度) * 100%、(目标点原始Y坐标 / 地图原始高度) * 100%。这样容器缩放时，编号会按比例同步位移。

• 锁定地图容器的宽高比例：给父容器设置aspect-ratio: 原始宽度/原始高度，同时设置width: 100%; max-width: [图片最大显示宽度]。确保容器随屏幕宽度自适应缩放时，始终保持地图的原始比例，避免拉伸变形导致定位错位。

• 结合transform优化定位精度：给关卡编号添加transform: translate(-50%, -50%)，同时将top/left设为对应位置的百分比。这样编号的中心点会精准对齐地图上的目标点，避免因元素自身尺寸造成的偏移误差。

• JS动态计算定位值（适配复杂场景）：在页面加载和窗口 resize 时，获取地图容器的实际宽高，根据原始坐标与容器当前尺寸的比例，动态计算并设置每个编号的top/left值。示例代码：

  // 地图原始尺寸
  const originalMapWidth = 1920;
  const originalMapHeight = 1080;
  // 各关卡原始坐标
  const levelPositions = [
    { id: 1, x: 320, y: 450 },
    { id: 2, x: 680, y: 720 }
  ];
  
  function adjustLevelPositions() {
    const mapContainer = document.querySelector('.map-container');
    const currentWidth = mapContainer.offsetWidth;
    const currentHeight = mapContainer.offsetHeight;
    const scaleX = currentWidth / originalMapWidth;
    const scaleY = currentHeight / originalMapHeight;
  
    levelPositions.forEach(pos => {
      const levelEl = document.getElementById(`level-${pos.id}`);
      levelEl.style.left = `${pos.x * scaleX}px`;
      levelEl.style.top = `${pos.y * scaleY}px`;
    });
  }
  
  // 初始化执行+监听窗口变化
  window.addEventListener('resize', adjustLevelPositions);
  adjustLevelPositions();
  

• 改用背景图承载地图：将地图设置为容器的background-image，并配置background-size: contain; background-repeat: no-repeat; background-position: center。容器自适应缩放时，背景图会保持比例居中显示，编号的百分比或动态计算定位依然有效。

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