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-＆gt; addStyleSheet（$ this-＆gt; baseurl。'/ templates /'。$ this-＆gt; template。'/ css / template.css'）; $ doc-＆gt; addStyleSheet（$ this-＆gt; baseurl。'/ templates /'。$ this-＆gt; 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;
    }  
}

Joomla 3媒体查询被忽略

1 个答案: