CSS媒体查询冲突问题：新增查询致旧查询失效的解决办法

你的问题出在媒体查询的顺序和范围重叠上：CSS是从上到下解析的，后声明的规则会覆盖先声明的。你写的多个媒体查询范围有重叠，比如max-width:815px会覆盖之前写的max-width:780px和781-815px区间的样式，导致之前的设置失效。

修复媒体查询的正确写法 #

把媒体查询按屏幕宽度从大到小排序，同时明确每个区间的边界，避免重叠覆盖：

/* 桌面端（≥980px） */
@media (min-width: 980px) {
    nav ul{
        float: right;
        margin-right: 20px;
    }
    nav ul li{
        display: inline-block;
        line-height: 80px;
        margin: 0 5px;
    }
}

/* 901px - 979px */
@media (max-width: 979px) and (min-width: 901px){
    .checkbtn{
        margin-top: 35px;
    }
}

/* 816px - 900px */
@media (max-width: 900px) and (min-width: 816px){
    .checkbtn{
        margin-top: 75px;
    }
}

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

/* 571px - 780px */
@media (max-width: 780px) and (min-width: 571px){
    .checkbtn{
        margin-top: 102px;
        margin-right: 45px;
    }
}

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

这样每个区间都是独立的，不会互相覆盖，而且按从大到小的顺序解析，规则优先级清晰。

更省心的居中方案：用Flexbox代替硬调margin #

硬调margin-top和margin-right适配不同屏幕太繁琐，还容易出问题。直接用Flexbox布局让按钮自动居中，根本不需要写一堆媒体查询：

/* 先给导航栏容器设置Flex布局 */
nav {
    display: flex;
    justify-content: flex-end; /* 如果按钮要靠右，用这个；要居中就换成center */
    align-items: center; /* 垂直方向居中 */
    height: 80px; /* 替换成你的导航栏实际高度 */
    padding: 0 20px; /* 左右内边距，代替margin-right */
}

/* 桌面端的ul样式保留 */
@media (min-width: 980px) {
    nav ul{
        margin-left: auto; /* 让ul靠右，和原来的float:right效果一致 */
    }
    nav ul li{
        display: inline-block;
        line-height: 80px;
        margin: 0 5px;
    }
    /* 桌面端隐藏菜单按钮 */
    .checkbtn {
        display: none;
    }
}

/* 移动端显示菜单按钮 */
@media (max-width: 979px) {
    nav ul {
        display: none; /* 隐藏桌面端菜单 */
    }
    .checkbtn {
        display: block;
        /* 仅保留必要的微调样式即可 */
    }
}

用Flexbox的话，不管屏幕怎么变，按钮都会保持垂直居中，水平方向可以通过justify-content直接设置靠左、居中或靠右，完全不用针对每个屏幕尺寸调margin，适配更稳定。

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