加载器上的边距问题（桌面版）

Question

我的主页上的加载程序有问题，我必须使用平板电脑查找桌面版本，space 位于网站的左侧和右侧。所以我使用了 margin : 0 auto 0 auto 作为桌面上的 body。问题是我的装载机也遵循这个规则，它不再在中心了，我试图给它一个边距：0 但不起作用，我也试图给出一个负边距，它在移动但是它是没有真正响应.. 如果您有任何解决方案，我将不胜感激！我将提供一些图片，以便您更容易理解：

.chargement {
    width: 100%;
    height: 100%;
    position: absolute;
    animation-name: loading;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
.chargement_bloc {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chargement_bloc-cercle {
    width: 130px;
    height: 130px;
    border-radius: 100%;
    border: 20px solid #fff;
    border-right-color: transparent;
    animation-name: circle;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}
@keyframes circle {
    0% {
        visibility: visible;
        transform: rotate(0deg);
    }
    99% {
        visibility: visible;
        transform: rotate(1500deg);
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}
@keyframes loading {
    0% {
        background-color: #9356DC;
        z-index: 1;
    }
    99% {
        z-index: 1;
        background-color: #9356DC;
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}


html {
    width: 100%;
}

body {
    margin: 0;
}

@media (min-width: 993px) {
    body {
        width: 993px;
        margin: 0 auto 0 auto;
        background-color: #5D5D5D;
}
}

<body>
<!-- Barre de chargement -->
    <div class="chargement">
        <div class="chargement_bloc">
            <div class="chargement_bloc-cercle"></div>
        </div>
    </div>
</body>

Answer 1

存在余量是因为在您的 media-queries 上您使用的是 min-width 所以基本上您的媒体查询是在您的桌面版本中实现的，这不是您想要的。因此，它正在使用您设置的 width: 993px;。

我将 min-width 更改为 max-width 假设您希望媒体样式出现 BELOW 993px。 max-width: 993px = 993px 以下的任何内容。所以现在，在 0-993px 屏幕宽度之间，您的媒体查询将生效。或者，min-width: 993px 表示高于 设置范围 ，在本例中为 993px.

.chargement {
    width: 100%;
    height: 100%;
    position: absolute;
    animation-name: loading;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-position: center;
}
.chargement_bloc {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chargement_bloc-cercle {
    width: 130px;
    height: 130px;
    border-radius: 100%;
    border: 20px solid #fff;
    border-right-color: transparent;
    animation-name: circle;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}
@keyframes circle {
    0% {
        visibility: visible;
        transform: rotate(0deg);
    }
    99% {
        visibility: visible;
        transform: rotate(1500deg);
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}
@keyframes loading {
    0% {
        background-color: #9356DC;
        z-index: 1;
    }
    99% {
        z-index: 1;
        background-color: #9356DC;
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}


body {
    margin: 0;
}

@media (min-width: 993px) {
    body {
        width: 993px;
        margin: 0 auto 0 auto;
        background-color: #5D5D5D;
    }
    
    .chargement {
      width: 993px;
    }
}

<body>
<!-- Barre de chargement -->
    <div class="chargement">
        <div class="chargement_bloc">
            <div class="chargement_bloc-cercle"></div>
        </div>
    </div>
</body>

加载器上的边距问题（桌面版）

Problem with Margin on a Loader (Desktop version)

html

css

margin

media-queries

css-animations