媒体查询只在顶部起作用

Question

@media screen and (max-width: 1336px) {
    .rectangle-box {
       visibility: visible;
      }

   #p-cactions {  
    top: 461px; 
    left: 410px; 
      }

}

@media screen and (max-width: 1040px) {
    .rectangle-box {
       visibility: hidden !important;
      }
    #p-cactions {    
    top: 461px !important; 
    left: 1110px !important; 
      }
}

我将它们放在 css 文件代码的顶部，它们可以工作，但是当我将它们放在 css 文件代码的底部时，它们根本不起作用。为什么我的 css 工作反了？我正在使用 chrome。 css 文件是 main.css 用于 mediawiki 中的 monobook 皮肤。我想它很好我让它工作我只是好奇。

Answer 1

您不得编辑main.css或直接破解其他代码！结果不可预测。

使用小工具扩展并直接在您的 wiki 上管理您的 JS/CSS。如果需要，有 gadget options 可以让它们置顶。

如果您想在服务器端做更复杂的事情，请阅读 developing with ResourceLoader doc page。它还提供有关媒体查询和顶部加载内容的建议。

Answer 2

我已经找到了一种方法，可以让这一切以一种非常可预测的方式在 main.css 中发挥作用。谢谢，但我已经解决了问题。我将@media 屏幕更改为@media。我把它放在 css 文件的底部并且它有效。

媒体查询只在顶部起作用

media queries only work at top

css

mediawiki