5

我正在尝试通过媒体查询在 MediaWiki 中使用响应式皮肤，并且正在解决一些奇怪的行为。

如果我将测试 div 添加到 wiki 页面：

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

然后添加一个媒体查询：

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

...到各个地方，该样式仅适用于某些浏览器。例如：

如果我将它添加到活动皮肤的“screen.css”文件中，所有其他工作风格都在其中：

  • iPad：没有
  • iPhone4：没有
  • Chrome 20.0 XP+Mac：否
  • Firefox 14.0.1 XP+Mac：是

如果我将它添加到通用皮肤的“shared.css”文件中，该文件适用于每个皮肤：

  • iPad：没有
  • iPhone4：没有
  • Chrome 20.0 XP+Mac：否
  • Firefox 14.0.1 XP+Mac：是

如果我将它添加到 wiki 的“MediaWiki:Common.css”页面：

  • iPad：是的
  • iPhone4：是的
  • Chrome 20.0 XP+Mac：是
  • Firefox 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" />

样式适用于任何地方。

4

1 回答 1

3

除了将查询添加到 Common.css 之外，还有几种方法可以做到这一点。这两种方法都涉及绕过 MediaWiki 资源加载器的样式预处理，这是 1.17 版的新功能。

方法一：

根据这个线程：

加载单个 css 文件（原始，没有缩小和其他 ResourceLoader 处理）：使用 OutputPage::addStyle( url, media, condition ) ，其中 url 直接指向文件。例如：

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

所以将这一行添加到 /skins/customskin.php 文件中，在initPage()函数中：

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

方法二：

根据 MediaWiki 开发人员对我提交的这个错误的回复：

如果您在皮肤中并且希望将某些内容应用于特定的媒体类型，请将其放在单独的文件中并在资源定义中声明媒体类型。要么在资源定义中省略媒体类型，你就可以使用@media 块。

因此，在 resources/resources.php 中，在皮肤的数组构造函数中，替换以下行：

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

有了这条线：

'styles' => array( 'customskin/customstyle.css' ),
于 2012-07-23T20:31:28.573 回答