如何修改移动端页面固定页眉的定位属性？

问题分析 #

你的代码核心需求是桌面端固定页眉，移动端滚动时取消固定，但当前实现未生效，主要有两个原因：

• 媒体查询仅针对390px以下设备，覆盖范围太窄，多数移动端设备（如安卓主流机型、大屏iPhone）宽度超过这个值，导致规则不触发。
• 使用position: inherit不够稳妥，它会继承父元素的定位属性，若父元素有定位设置，会引发意外布局。

修改后的代码 #

header {
  background-color: #2C2D31;
  color: #F0F8FF;
  padding: 25px 10px;
  width: 100%;
  text-align: right;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  z-index: 1;
}

/* 覆盖绝大多数移动端设备的断点 */
@media screen and (max-width: 768px) {
  header {
    position: static; /* 用默认定位取消固定效果 */
    top: auto; /* 清除fixed时的top属性设置 */
    width: auto; /* 可选：让页眉自适应父容器宽度，避免溢出 */
  }
}

关键调整说明 #

• 扩大断点范围：将max-width设为768px，覆盖手机、小平板等主流移动端设备，确保规则在更多场景生效。
• 使用默认定位：position: static是元素的默认定位方式，完全取消固定效果，不会受父元素定位影响，比inherit更可靠。
• 重置残留样式：fixed定位时设置的top:0会残留，通过top:auto清除，避免影响正常布局。
• 自适应宽度（可选）：添加width:auto后，页眉会自适应父容器宽度，若页面有全局容器，能避免横向溢出问题。

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