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

【问题标题】：Problem with Margin on a Loader (Desktop version)加载器上的边距问题（桌面版）
【发布时间】：2021-12-09 00:26:47
【问题描述】：

我的主页上的加载程序有问题，我必须使用平板电脑查找桌面版本，网站左右两侧都有空间。所以我在桌面上使用了 margin : 0 auto 0 auto 。问题是我的装载机也遵循这个规则，它不再在中心，我试图给它一个边距：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>

【问题讨论】：

标签： html css media-queries css-animations margin

【解决方案1】：

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

我将min-width 更改为max-width 假设您希望媒体样式发生在低于 993 像素。 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>

【讨论】：