Joomla 3媒体查询被忽略

Question

我一直在尝试为我正在构建的 Joomla 3 模板（从 Protostar 模板复制）编写一些媒体查询，但不幸的是我没有取得太大的成功。

我一直在尝试更改在普通桌面上显示的背景颜色，然后我有以下媒体查询：

#sidebar {
    background:#fabe04;
  }

// Landscape phones and down
  @media(max-width:480px) {
    #sidebar {
    background:#FFF;
  }    
}

但由于某种原因，这在我刷新时被忽略了，即使我调整了浏览器窗口的大小也没有任何变化。

我当前的设置是我创建了另一个名为 custom.css 的 css 文件，这显示了我为正常大小的网站添加的样式，但似乎无法识别媒体查询。

如果有人可以请建议将不胜感激。

谢谢

感谢 makshh 和 nikesh。当我使用 protostar 模板作为我的基础时，视口标签已经显示为：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

样式表链接如下：

// 添加样式表 $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');

自定义样式表显示了我模板的所有样式表，但无法识别媒体查询。

我还尝试将 !important 添加到我的媒体查询中的样式，但没有任何变化。

再次感谢您的宝贵时间。

Answer 1

首先检查您的视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

然后检查您的媒体查询，使它们在语法上相似！

@media screen and (max-width:400px){

}// or else

@media (max-width:400px){

}

检查完这些后，请务必在 CSS 末尾添加媒体查询。或者如果您使用外部 css 进行媒体查询链接它们如下：

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="media.css" />

最后一个选项是使用 !important

@media(max-width:480px) {
    #sidebar {
      background:#FFF !important;
    }  
}