分辨率相关Media Queries覆盖默认CSS样式问题问询

核心问题 #

你设置的默认样式类名是.rightpage，但媒体查询中使用的类名是.rightPane——两者拼写（大小写+后缀）不一致，导致默认的position: relative从未作用到目标元素上。如果你的元素实际使用的是.rightPane类，那只有媒体查询里的position: fixed会被应用，自然会出现“低分辨率下fixed始终生效”的问题。

修复步骤 #

1. 统一类名拼写
   根据元素实际使用的类名二选一修改：

   • 若元素用的是.rightpage，调整媒体查询：

     @media (min-resolution: 1.5dppx) { 
       .rightpage { position: fixed; } 
     }
     

   • 若元素用的是.rightPane，调整默认样式：

     .rightPane{ position: relative }
     

2. 可选：增强媒体查询兼容性
   部分旧浏览器对dppx单位支持有限，可以补充dpi单位的写法做兼容（1dppx = 96dpi，1.5dppx = 144dpi）：

   @media (min-resolution: 144dpi), (min-resolution: 1.5dppx) { 
     .rightPane { position: fixed; } 
   }
   

验证 #

修正后切换不同分辨率测试：低分辨率下元素会应用position: relative，150%及以上分辨率时会覆盖为position: fixed。

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