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媒體查詢被忽略

回答

相關問題