所以我使用max-width屬性縮放了精選圖像,但是我想知道是否可以在導航圖像圖標上實現相同的效果?這可以通過圖像精靈來完成,或者推薦的方法是什麼?是否可以爲響應式設計縮放導航圖標?
0
A
回答
3
根據媒體查詢斷點,您可以加載不同的圖像大小。
/* 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');
}
}
1
你可以做什麼克里斯說加上使用一個精靈做背景位置。
你也可以使用和做一個高度100%。
我會推薦克里斯建議的。
2
這真的取決於你想要多少佈局改變,如果你需要匹配的供應商有一定的要求(蘋果的準則,例如)
我有一個網站,所有的菜單圖像是相同的高度,並且如果在更寬的屏幕上使用線性佈局。
將其更改爲更小屏幕的那一刻我包含了@media特定的大小和菜單圖標的放置要求。例如,我希望它們堆疊,我希望它們的像素高度爲42像素(Apple稱觸摸屏的最小可觸摸尺寸)
對於桌面,我將特定寬度和高度設置爲'auto',而對於更窄的屏幕,我有一個特定的高度(42像素),寬度設置爲'自動'。
我傾向於不想依賴多個圖像,因爲它確實會使它隨着時間的推移變得更難以維護。事實上,我停止爲我的菜單使用圖像,並使用CSS(儘管我沒有單調的圖像精靈)做了所有的事情,我使用自制的dingbat web字體,可以很好地縮放比例)
相關問題
- 1. 響應式設計圖像縮放(tumblr主題)
- 2. 使用響應式導航欄縮放問題
- 3. 響應式導航
- 4. 以導航爲中心的響應式徽標
- 5. 保存matplotlib交互式導航中的縮放設置圖
- 6. 是否可以使用Sahi測試響應式網頁設計應用程序?
- 7. 響應式絕對圖像縮放
- 8. 在響應式設計中縮放對象
- 9. CSS響應式設計:奇怪的移動縮放問題
- 10. 響應式網站設計元素縮放
- 11. 是否可以通過自舉響應式css實現拖放?
- 12. 是否可以使字體可縮放?
- 13. 是否可以通過PHP解壓縮SharpZipLib壓縮響應?
- 14. 垂直響應設計:按比例縮放圖像
- 15. 在響應式設計中更改導航項目的順序
- 16. 在響應式設計中導航欄疊加菜單項
- 17. 是什麼把一個響應標誌爲引導導航欄
- 18. 以響應爲中心的導航欄
- 19. iOS;是否可以將動畫圖標設置爲UITabController圖標?
- 20. 使用mediaelement.js獲取HTML5視頻以針對響應式設計進行縮放
- 21. 響應式導航調整
- 22. CSS:在響應式導航欄中作出響應和縮放的背景圖片鏈接
- 23. 響應D3縮放行爲
- 24. 以響應式設計爲中心所有圖像
- 25. 沒有引導的響應式設計
- 26. 響應式設計與引導
- 27. Android:是否可以縮放xml drawable?
- 28. 是否可以爲應用程序的攝像頭視圖添加GPS導航?
- 29. CSS:響應式設計 - 在兩列列表中縮小圖像
- 30. 是否可以在傳送帶上放置導航欄?
您可以使用SVG,但支持是我還是聽過最近還是粗略的... – 2012-01-04 18:27:21