CSS媒体查询断点失效 移动端fixed导航栏滚动异常排查

原因 #

• 浏览器视口宽度存在亚像素渲染特性：移动端设备受设备像素比、浏览器内置UI占位（比如iOS Safari的底栏、地址栏动态收起/展开）影响，实际计算的视口宽度很少是整数值。你设置max-width: 375px时，只要实际视口宽度大于375px哪怕0.1~0.8px（比如常见的375.2px、375.6px），都不会命中该规则。你测试时改成max-width:376px能生效，就是因为覆盖了这部分非整数的宽度区间。
• 两个断点之间存在匹配空隙：第一个断点最大宽度是360px，第二个最小宽度是361px，会导致360.1px~360.9px宽度区间的设备两个媒体查询都匹配不到。

修复方案 #

断点边界用0.98px的差值做兼容，不要留空隙，也不要硬卡整像素：

/* 小于等于360px设备 */
@media (max-width: 360.98px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

/* 361px~375px宽度设备 */
@media (min-width: 361px) and (max-width: 375.98px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

原因 #

核心问题是你给通配符*设置了overflow-x: hidden：

• 移动端Webkit内核浏览器（iOS Safari、大部分安卓自带浏览器）中，只要position:fixed元素的任意父级元素设置了overflow非visible值、transform、filter、perspective属性，就会创建新的定位上下文，导致fixed元素不再相对于浏览器视口定位，而是相对于该父元素定位，页面滚动时就会出现跟着父元素移动、延迟吸顶的问题。
• 额外诱因：你给.main设置了position: absolute加100vw宽高，进一步创建了独立定位上下文；导航栏容器用了width:100vw，移动端100vw会把纵向滚动条宽度算入，容易触发横向滚动干扰定位，且你没给导航栏设置明确的top:0; left:0定位值，初始位置计算容易出错。

修复方案 #

1. 删掉通配符里的overflow-x: hidden，如果要全局禁止横向滚动，只给html、body标签设置对应属性：

* {
    margin: 0;
    padding: 0;
    /* 删掉这里的overflow-x: hidden */
}
html, body {
    overflow-x: hidden;
    width: 100%;
}

2. 修改导航栏容器的样式，补全定位属性，把100vw改成100%避免滚动条宽度干扰：

.container {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* 替换原来的100vw */
    height: 7.5vh;
    background-color: rgba(0,0,0,0.65);
    overflow: hidden;
    z-index: 999; /* 加高层级避免被其他元素遮挡 */
}

3. 检查所有导航栏的父级元素，不要给它们加transform、filter属性，避免破坏fixed的定位上下文。

内容的提问来源于stack exchange，提问作者Pleasant Nightmares