在使用CSS媒體查詢時遇到問題

我想在智能手機屏幕上隱藏我的菜單圖標，但媒體查詢不起作用。任何人都可以提出一些見解
在使用CSS媒體查詢時遇到問題

我試着在這裏查看一些其他答案，但沒有什麼幫助，因爲我通過重新調整瀏覽器來檢查它，但是我使用了最大寬度，所以它仍然應該顯示。

我有三個不同的標誌。一個用於桌面，一個用於平板電腦，另一個用於移動。現在，我試圖隱藏移動設備的桌面徽標，但它不起作用，所以我想在嘗試隱藏/顯示任何更多圖像之前嘗試找出原因。

更新：已解決。我不確定它爲什麼可以工作，但經過不斷的提神之後，30分鐘後它就可以工作。

/* Smartphones (portrait) ----------- */ 
 
@media only screen 
 
and (max-width : 320px) { 
 
    #menu-logo { 
 
     display: none; 
 
    } 
 
}

<div id="header" class="header"> 
 
    <a href="/index.html"><img id="menu-logo" src="../images/logo.svg"/></a> 
 
    <a href="/index.html"><img id="menu-logo-semi" src="../logo-semi.svg"/></a> 
 
    <a href="/index.html"><img id="menu-logo-small" src="../logo-short.svg"/></a> 
 
</div

來源

2014-10-16 Bob

而你在瀏覽器的devtools風格檢查器中檢查了這個，發現...？ – 2014-10-16 15:56:23

確保在實時站點上編輯CSS時瀏覽器緩存已關閉。瀏覽器使用緩存來加快您的網站加載速度。你可以在例如Chrome開發者工具。 – Tim 2014-10-16 16:07:08

沒有必要有3個鏈接。

一個更好的辦法來做到這一點如下：

<div id="header" class="header"> 
    <a class="logo" href="/index.html">My cool name</a> 
</div> 

<style> 
<!-- Desktop --> 
.logo { 
    display: block; 
    text-indent: -9999px; 
    width: 200px; 
    height: 82px; 
    background: url(logo.svg); 
    background-size: 100px 82px; 
} 

<!-- Tablet --> 
@media all and (max-width: 64em) and (min-width: 48em) { 
.logo { 
    width: 80px; 
    height: 60px; 
    background-size: 80px 60px; 
} 
} 

<!-- Mobile --> 
@media all and (max-width: 48em) { 
.logo { 
    width: 50px; 
    height: 30px; 
    background-size: 50px 30px; 
} 
} 
</style>

清潔代碼..只要改變你的標誌的大小，因爲你需要。

編輯我不知道您的徽標是否在每個屏幕分辨率間隔的視覺上發生變化。如果是這樣，只需在「background-size」之前在每個媒體查詢中聲明另一個「background：url ...」規則即可。如果不是，只要比例是正確的，它就可以，因爲它是一個矢量。

來源

2014-10-16 16:08:33

的原因很可能是由於CSS specficity，以及在樣式表（一個或多個）事物的秩序。我們需要查看所有影響＃menu-logo項目的CSS，以及img，特別是默認（即非媒體查詢）CSS以及影響此菜單徽標項目的任何其他媒體查詢。

而且我們還需要知道這樣的CSS是在媒體查詢之前還是之後 - 事情的順序是非常重要的。（注：我知道真的這會更好，作爲評論，而不是一個完整的答案，但我還沒有足夠的代表呢！）

所以看看的特異性和順序，然後如果仍然flummoxed給我們更多的CSS（或者整個樣式表，如果它不太長）。

來源

2014-10-16 16:05:45 GuyH

在使用CSS媒體查詢時遇到問題

回答

相關問題