预加载阶段移动端响应式设计失效，如何实现跨端一致效果？

问题根源 #

你的代码存在两个核心问题：

• 父容器#loading-animation已经通过flex布局实现居中，但子元素.loader又用position:absolute+固定百分比的left/top强行定位，不同宽高比的屏幕（比如桌面横屏、移动端竖屏）下，固定百分比位置会偏离预期。
• border-top:9px是固定像素值，在小屏幕上会导致边框与loader的比例失衡，破坏环形图视觉效果。

修复方案 #

直接利用父容器的flex布局完成居中，同时将固定像素边框改为相对单位，保证跨设备比例一致：

修改后的代码：

#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:url('data:image/');
  background-repeat: no-repeat;
  background-size: cover ;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  border-top: 0.7vw solid #00a2ed; /* 用vw替代固定px，和loader尺寸比例匹配 */
  border-radius: 50%; /* 改为50%确保正圆，避免不同屏幕下椭圆变形 */
  width: 12vw; 
  height: 12vw; 
  animation: spin 2s linear infinite; 
  /* 移除absolute、left、top，依赖父容器flex居中 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

关键调整点 #

• 移除.loader的position:absolute、left:44%、top:46%，靠父容器的flex布局实现完美居中，不受屏幕宽高比影响。
• 将border-top:9px改为0.7vw，该数值根据桌面端12vw对应9px的比例计算，保证边框与loader的尺寸比例在任何设备上一致。
• 把border-radius:80%改成50%，确保环形为正圆形，避免跨设备的形状变形。

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