Joomla 3媒体查询被忽略

我一直在试图写一些Joomla 3模板的媒体查询，我正在构建（从Protostar模板复制），不幸的是我没有太大的成功。Joomla 3媒体查询被忽略

我一直在试图改变，我已经呈现出正常的桌面背景颜色，然后我有以下媒体查询：

#sidebar { 
    background:#fabe04; 
    } 

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

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

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

如果有人可以请建议真的很感激。

谢谢

谢谢makshh和nikesh。由于我使用的原恒星模板作为我的基地，视口标签已经显示为：

<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'）;

自定义样式表显示我的模板的所有样式表，但只是不识别媒体查询。

我也尝试添加！对我的媒体查询中的样式重要，但没有任何更改。

再次感谢您的时间。

来源

2015-10-17 Michael Owen

你尝试添加到您的样式：或者，如果您使用外部CSS媒体查询将它们链接如下！？这可能是特异性问题。 – makshh

首先检查您的视口meta标签。

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

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

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

}// or else 

@media (max-width:400px){ 

}

您检查这些之后，总是在你的CSS的末尾添加媒体查询。重要的规则

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

最后一个选项是使用重要

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

来源

2015-10-18 05:20:27

谢谢makshh和nikesh。我已经检查过，当我将浏览器重新调整到480像素以下时，我仍然没有看到更改。 –

正如我使用protostar模板作为我的基础视口标记已经显示 –

和样式表的链接如下所示 –

Joomla 3媒体查询被忽略

回答

相关问题