问题：

.bg02 {
            z-index:-1; 
            margin: -50px 0px -100px 0px;
 }

这段css样式，我在手机上这个样式是正常的，我在Windows电脑上面他与下面的间距太大了，我们需要调整一下适配一下

问题的原因：

在不同设备上CSS样式表现不一致的问题通常是由于设备分辨率、浏览器渲染差异等原因引起的。针对你描述的情况，间距过大可能是因为margin值在不同设备上表现不同。

为了解决这个问题，你可以尝试以下几个方法来适配不同的设备：

1. 使用媒体查询：针对不同的设备或分辨率，设置不同的margin值。例如：

   .bg02 {
       z-index: -1;
       margin: -50px 0 -100px 0;
   }
   
   @media (max-width: 768px) {
       .bg02 {
           margin: -30px 0 -60px 0; /* 适配手机等小屏设备 */
       }
   }
   
   

    

• 这里的@media (max-width: 768px)表示当屏幕宽度小于等于768px时应用该样式。

2、使用百分比值或em/rem单位：相对单位（如百分比、em、rem）会根据父元素或根元素的大小进行调整，可能会更加稳定地在不同设备上显示。例如：

.bg02 {
    z-index: -1;
    margin: -5% 0 -10% 0; /* 使用百分比值 */
}

或者使用em或rem单位：

.bg02 {
    z-index: -1;
    margin: -3em 0 -6em 0; /* 使用em单位 */
}

1. 调整具体数值：根据实际情况微调margin的数值，找到在不同设备上都能够较好显示的值。
2. 测试和调试：在不同设备和浏览器上进行测试，并根据实际效果调整样式。

综上所述，结合以上方法，你可以尝试适配和调整你的CSS样式，使其在不同设备上显示一致。使用媒体查询可以是最有效和灵活的方法之一，但具体的调整仍需根据实际情况和你的设计需求来进行。