元素不遵循媒體查詢的高度

我試圖在屏幕最大寬度爲991px時調整網頁的徽標大小。我添加了黑色的背景顏色，以查看它是否有效。背景顏色改變，但高度不變。當我檢查Chrome上的元素時，我的媒體查詢中的高度被刪除。當我取消選中身體/原始CSS的高度時，我的媒體查詢中的高度起作用。元素不遵循媒體查詢的高度

代碼：

.webpage-logo{ 
    position: relative; 
    width: 15%; 
    height: 10%; 
    margin-bottom: 0; 
    } 

@media only screen and (max-width: 1199px){ 
    .webpage-logo{ 
    height: 500px; 
    //background-color: #000; 
    } 
}

來源

2014-02-26 nutellafella

提供您正在使用的HTML，並請驗證您未施加任何內嵌樣式的html元素。儘可能提供小提琴。 – vdua

沒有提供完整的HTML和CSS沒有辦法回答這個問題，因爲什麼事情都可能會改寫CSS。應該工作的一件事是增加！重要的結尾。

因此，而不是身高：500px;，做身高：500px！重要;

我做了這個代碼，並能正常工作，所以在你的CSS別的東西是壓倒它：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.webpage-logo{ 
    position: relative; 
    width: 15%; 
    height: 10%; 
    margin-bottom: 0; 
    background-color:#000000; 
    } 

@media only screen and (max-width: 1199px){ 
    .webpage-logo{ 
    height: 500px; 
    //background-color: #000; 
    } 
} 
</style> 
</head> 
<body> 
<div class="webpage-logo" style="margin-left:10px;">test</div> 
</body> 
</html>

來源

2014-02-26 02:37:05 user1795832

我正在做我的網頁上的Grails，我使用引導，所以這可能是罪魁禍首。我會檢查... – nutellafella

把！重要的在那裏仍然應該做的伎倆。 – user1795832

元素不遵循媒體查詢的高度

回答

相關問題