媒體查詢不起作用

我正在學習HTML和CSS。我做了一個網站，我需要將媒體查詢放在一件事上，但它不起作用。這裏是我的代碼媒體查詢不起作用

<a class="boxmb" href="#section2"><img class="boxmb" id="boxmb" id="togglee" 
style="position: fixed;left: 90%;padding-top:10%" src="images/box1.png" 
id="image1" 
onclick="showButton();diffImage(this);showSurpriseImage();PlaySound();" ></a>

CSS

@media screen and (max-width: 1100px) { 
#boxmb { 
position: fixed; 
left: 60%; 
padding-top:1%; 
z-index: 999; 
} 
}

這裏是我的地盤 http://rickandmorty.8u.cz/index.html

來源

2017-10-19 Martin Ďurický

一個元素只能有一個ID，和你的類boxmb的IMG擁有3我想你的意思是有那些是類來代替。 – Eqomatic

是的，我已經修復了它，它在我的樣式表中，但它不工作 –

它不工作，因爲內嵌的造型你這是壓倒一切的內部/外部img標籤內造型你有相同的元素。內聯樣式的優先級最高，其次是內部和外部。所以要解決這個問題，只需刪除內聯樣式並將其放在媒體查詢之上。

#boxmb { 
 
    position: fixed; 
 
    left: 90%; 
 
    padding-top: 10%; 
 
} 
 

 
@media screen and (max-width: 1100px) { 
 
#boxmb { 
 
    position: fixed; 
 
    left: 60%; 
 
    padding-top: 1%; 
 
    z-index: 999; 
 
} 
 
}

<a class="boxmb" href="#section2"> 
 
    <img class="boxmb" id="boxmb" src="images/box1.png" onclick="showButton();diffImage(this);showSurpriseImage();PlaySound();"> 
 
</a>

來源

2017-10-19 16:39:42 VXp

媒體查詢不起作用

回答

相關問題