我正在尝试使用媒体查询在MediaWiki中运行响应式皮肤，我正在排除一些奇怪的行为。
如果我在wiki页面添加测试div：
<div id="testing">TESTING</div>
然后添加媒体查询：
@media screen {
#testing {background-color: green;}
}
...到各个地方，这种风格仅适用于某些浏览器。例如：
如果我将它添加到活动皮肤的“screen.css”文件中，其中所有其他工作样式都存在：
如果我将它添加到普通皮肤的“shared.css”文件中，该文件适用于每个皮肤：
如果我将它添加到wiki的“MediaWiki：Common.css”页面：
N.B。：所有这些位置的常规样式声明按预期工作。只有在外部文件中的媒体查询中包含时才会出现奇怪现象。这显然是一个浏览器问题，与MediaWiki样式处理问题相结合。什么是Firefox做的不同？
我还注意到在使用Chrome的开发者控制台检查页面时，样式似乎是由“load.php”导入的，作为样式声明的一个大联合线，包括我的媒体查询;但它似乎并没有被应用，即使在支持它的浏览器中也是如此。
任何人都可以对这种行为有所了解吗？我更喜欢在独立的样式表中工作，而不是在wiki编辑器中工作。
更新
我还注意到，在Firefox Web Console中检查元素时，样式列在活动样式中，如下所示：
load.php:1 @media screen
#testing {
background-color: green;
}
在Chrome的开发工具元素浏览器中以相同方式检查元素时，该样式未在任何位置列出。
更新2：
如果我在主题中替换此行：
<link rel="stylesheet" href="/wiki/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&only=styles&skin=customskin&*" />
直接链接到主题：
<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />
各种风格都适用。
答案 0 :(得分：3)
除了将查询添加到Common.css之外，还有几种方法可以做到这一点。这两种方式都涉及绕过MediaWiki的资源加载器的样式预处理，从版本1.17开始是新的。
方法1：
根据this thread：
要加载单个css文件（原始，没有缩小和其他ResourceLoader处理）：使用OutputPage :: addStyle（url，media，condition），其中url直接指向文件。例如：
$out->addStyle( 'modules/IE70Fixes.css', 'screen', 'IE 7' );
所以在initPage()函数中将此行添加到/skins/customskin.php文件中：
$out->addStyle( 'customskin/customstyle.css', 'screen');
方法2：
根据MediaWiki开发者对this bug I filed的回复：
如果你在皮肤上并且想要某些东西适用于 特定媒体类型，将其放在单独的文件中并声明媒体类型 资源定义。要么是要么省略资源中的媒体类型 定义，你将能够使用@media块。
所以，在resources / resources.php中，在skin的数组构造函数中，替换这一行：
'styles' => array( 'customskin/customstyle.css' => array( 'media' => 'screen' ) ),
这一行：
'styles' => array( 'customskin/customstyle.css' ),