是否可以爲響應式設計縮放導航圖標？

Question

所以我使用max-width屬性縮放了精選圖像，但是我想知道是否可以在導航圖像圖標上實現相同的效果？這可以通過圖像精靈來完成，或者推薦的方法是什麼？

Answer 1

根據媒體查詢斷點，您可以加載不同的圖像大小。

/* Smartphones (portrait) ----------- */ 
    @media only screen 
    and (max-width : 320px) { 
     #navIcon { 
     background-image:url('small.jpg'); 
     } 
    } 


/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    #navIcon { 
    background-image:url('normal.jpg'); 
    } 
} 

Answer 2

你可以做什麼克里斯說加上使用一個精靈做背景位置。

你也可以使用和做一個高度100％。

我會推薦克里斯建議的。

Answer 3

這真的取決於你想要多少佈局改變，如果你需要匹配的供應商有一定的要求（蘋果的準則，例如）

我有一個網站，所有的菜單圖像是相同的高度，並且如果在更寬的屏幕上使用線性佈局。

將其更改爲更小屏幕的那一刻我包含了@media特定的大小和菜單圖標的放置要求。例如，我希望它們堆疊，我希望它們的像素高度爲42像素（Apple稱觸摸屏的最小可觸摸尺寸）

對於桌面，我將特定寬度和高度設置爲'auto'，而對於更窄的屏幕，我有一個特定的高度（42像素），寬度設置爲'自動'。

我傾向於不想依賴多個圖像，因爲它確實會使它隨着時間的推移變得更難以維護。事實上，我停止爲我的菜單使用圖像，並使用CSS（儘管我沒有單調的圖像精靈）做了所有的事情，我使用自制的dingbat web字體，可以很好地縮放比例）