媒体查询仅在顶部工作

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反向工作？我正在使用铬。 css文件是mediawiki中monobook皮肤的main.css。我想它很好我让它工作我只是好奇。

Answer 1

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

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

如果您想在服务器端执行更复杂的操作，请阅读developing with ResourceLoader doc page。它还提供有关媒体查询和最佳负载的建议。

Answer 2

我已经找到了一种方法，以一种非常可预测的方式在main.css中完成所有工作。谢谢，但我已经解决了这个问题。我将@media屏幕更改为@media。我把它放在css文件的底部，它可以工作。