大屏显示器下固定导航栏右偏移超出内容最大宽度如何解决

修复方法 #

你遇到的问题核心是position: fixed的元素默认相对于浏览器视口定位，父元素的position: relative对其不生效，仅设置max-width也无法限制它的水平偏移位置。

最简单的解决方案是用calc()结合max()函数自动计算导航栏的右侧边距，仅需修改媒体查询内.navbar的right属性即可：

@media screen and (min-width: 780px) {
    .navbar {
        background-color: #ffffffde;
        position: fixed;
        padding: 3px;
        z-index: 50;
        /* 替换原有right:0和margin-right:2rem两行 */
        right: max(2rem, calc((100vw - 1024px) / 2));
    }
    /* 其余原有代码保持不变 */
}

逻辑说明

1. 100vw代表当前浏览器视口的完整宽度
2. calc((100vw - 1024px)/2)会自动计算宽屏状态下，1024px内容区右侧到视口边缘的距离
3. max()函数保证视口宽度小于1024px时，导航栏右侧至少保留2rem的边距，和你原有实现效果完全一致
4. 全宽度下导航栏都会自动对齐1024px内容区的右侧，不会超出范围，无需编写多套媒体查询

兼容旧浏览器的备选方案 #

如果需要适配不支持max()函数的旧浏览器，仅需多写1条媒体查询兜底即可，远比重写全分辨率规则简单：

@media screen and (min-width: 780px) {
    .navbar {
        background-color: #ffffffde;
        position: fixed;
        padding: 3px;
        z-index: 50;
        right: 2rem;
    }
    /* 其余原有代码保持不变 */
}
/* 仅在视口宽度超过1024px时替换右侧边距 */
@media screen and (min-width: 1024px) {
    .navbar {
        right: calc((100vw - 1024px) / 2);
    }
}

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