CSS最后一个媒体查询优先于其他人如何修复

CSS last Media Query having priority on others how to fix

提问人:user22762966 提问时间:10/18/2023 更新时间:10/18/2023 访问量:22

问:

我正在尝试在较小的屏幕上使导航栏菜单按钮居中(更改边距)。尽管如此,每次我进行另一个媒体查询时,之前的媒体查询都不再起作用。 有没有人知道如何在不撤消之前的媒体查询的情况下添加媒体查询,或者有谁知道我的问题的另一个有效的解决方案?

下面是带有媒体查询的 CSS:

**/* NORMAL SMARTPHONE END */

/* NORMAL COMPUTER BEGINNING */
@media (min-width: 980px) {
    nav ul{
        float: right;
        margin-right: 20px;
    }


    nav ul li{
        display: inline-block;
        line-height: 80px;
        margin: 0 5px;
    }
}
/* NORMAL COMPUTER END */


@media only screen and (max-width: 780px){
    .checkbtn{
        margin-top: 102px;
        margin-right: 45px;
    }
}


@media only screen and (max-width: 815px) and (min-width: 781px){
    .checkbtn{
        margin-top: 92px;
    }
}


@media only screen and (max-width: 845px) and (min-width: 816px){
    .checkbtn{
        margin-top: 75px;
    }
}


@media (max-width: 900px){
    .checkbtn{
        margin-top: 45px;
    }
}

@media (max-width: 815px){
    .checkbtn{
        margin-top: 87px;
    }
}

@media (max-width: 570px){
    .checkbtn{
        margin-top: 181px;
        margin-right: 48px;
    }
    label.logo{
        margin-left: -10px;
    }
}


/* 
@media only screen and (max-width: 927px) and (min-width: 901px){
    .checkbtn{
        margin-top: 35px;
    }
}
 */**
CSS 媒体查询

评论

0赞 A Haworth 10/19/2023
你有没有考虑过其他居中的方法。特别是看看 flex。
0赞 A Haworth 10/19/2023
媒体查询的顺序很重要。看看在781px的屏幕上会发生什么。在底部附近,我们发现了一个边距顶部的 815 像素,因此它将覆盖我们刚刚从最大宽度 900 像素中获取的边距顶部 45 像素,这反过来又覆盖了我们从更远处获得的边距顶部 92 像素。

答: 暂无答案