媒体查询是否可以在MediaWiki中使用？

我试图通过媒体查询获得在MediaWiki中工作的响应式皮肤，并解决了一些奇怪的行为。媒体查询是否可以在MediaWiki中使用？

如果我添加一个测试div来一个wiki页面：

<div id="testing">TESTING</div>

，然后添加一个媒体查询：

@media screen { 
    #testing {background-color: green;} 
}

...到各个地方，风格只适用于某些浏览器。例如：

如果我把它添加到活跃皮肤的 “screen.css” 的文件，在所有其他工作方式生活：

的iPad：NO
的iPhone4：NO
铬20.0 XP + MAC：NO
火狐14.0.1 XP + MAC：是

如果我把它添加到常见的皮肤的 “shared.css” 的文件，它适用于所有的皮肤：

的iPad：NO
的iPhone4：NO
Chrome的20.0 XP + MAC：NO
火狐14.0.1 XP + MAC：是

如果我把它添加到wiki的“链接到MediaWiki：Common.css” 页：

iPad的：是
iPhone4的：是
Chrome的20.0 XP + MAC：是
火狐14.0.1 XP + MAC：是

注：：正常样式声明按预期在所有这些位置均可正常工作。只有在外部文件中的媒体查询中包装时才会出现奇怪现象。这显然是一个浏览器问题，与MediaWiki样式处理问题混合在一起。什么是Firefox做的不同？

我也注意到，在使用Chrome的开发者控制台检查页面时，样式显示为由“load.php”导入为样式声明（包括我的媒体查询）的一个大型连体线条;但它似乎只是没有被应用，即使在支持它的浏览器中。

任何人都可以阐明这种行为？我宁愿在独立的样式表中工作，而不喜欢在wiki编辑器中工作。

更新：

我还要注意检查在Firefox的Web控制台的元素时，风格积极的风格中列出的，就像这样：

load.php:1 @media screen 
#testing { 
    background-color: green; 
}

在视察元素在Chrome的开发工具元素浏览器中也是一样，样式不在任何地方列出。

更新2：

如果我替换此行我的主题：

<link rel="stylesheet" href="/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&amp;only=styles&amp;skin=customskin&amp;*" />

直接链接到主题：

<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />

款式都是正确处处适用。

来源

2012-07-21 meetar

有一对夫妇的方式做到这一点，除了加入查询Common.css。这两种方式都绕过了MediaWiki Resource Loader的样式预处理，这是从1.17版本开始的新增功能。

方法1：

根据this thread：

要加载的单个CSS文件（原始的，而不缩小等的ResourceLoader处理）：使用OutputPage :: addStyle（URL，媒体，条件）url直接指向一个文件。例如：

$out->addStyle('modules/IE70Fixes.css', 'screen', 'IE 7');

所以加入这一行的/skins/customskin.php文件，在initPage()功能：

$out->addStyle('customskin/customstyle.css', 'screen');

方法2：

据一个链接到MediaWiki开发商this bug I filed响应：

如果你是在皮肤和你想要的东西，以适用于特定的媒体类型，把它放在一个单独的文件，并声明该媒体类型在的资源定义。无论是或忽略媒体类型的资源定义，你就可以使用@media块。

因此，在资源/ resources.php，在皮肤的数组构造，替换此行：

'styles' => array('customskin/customstyle.css' => array('media' => 'screen')),

这一行：

'styles' => array('customskin/customstyle.css'),

来源

2012-07-23 20:31:28 meetar

媒体查询是否可以在MediaWiki中使用？

回答

相关问题