移动端媒体查询Portrait与Landscape样式覆盖问题解决方案咨询

你当前的样式冲突由CSS优先级规则导致：两个媒体查询的宽度范围存在包含关系，所有宽度≤480px的设备同时满足max-width:480px和max-width:734px两个条件，而CSS中后声明的同权重样式优先级更高，所以横屏样式总会覆盖竖屏的同属性设置。

方案1：添加横竖屏状态判断（最精准） #

直接在媒体查询中增加orientation参数，明确区分横竖屏场景，两个规则完全独立不会互相覆盖：

/* 仅移动端竖屏、宽度≤480px时生效 */
@media only screen and (max-width: 480px) and (orientation: portrait) {
  #one{
    position: relative;
    top: 310px;
  }
}

/* 仅移动端横屏、宽度≤734px时生效 */
@media only screen and (max-width: 734px) and (orientation: landscape) {
  #one{
    position: relative;
    top: 230px;
  }
}

方案2：拆分媒体查询宽度范围 #

如果不想依赖orientation属性，也可以将两个媒体查询的宽度范围拆分为完全不重叠的区间，避免同一设备同时命中两个规则：

/* 宽度≤480px时生效，对应竖屏场景 */
@media only screen and (max-width: 480px) {
  #one{
    position: relative;
    top: 310px;
  }
}

/* 宽度在481px~734px之间时生效，对应横屏场景 */
@media only screen and (min-width: 481px) and (max-width: 734px) {
  #one{
    position: relative;
    top: 230px;
  }
}

• 优先用vh/vw等相对视口单位替代固定px的偏移值，比如设置top: 28vh，元素位置会自动根据视口尺寸调整，无需额外写多个媒体查询适配横竖屏
• 头部文本定位尽量用Flex/Grid布局实现，避免用position: relative加top偏移，减少脱离文档流导致的布局错位问题
• 如需固定头部位置，可改用position: sticky实现，适配性更强

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