縮放大CSS背景圖像的移動設備

我目前正在建設它的設計以展示全屏幕，使用的透明度和有趣的CSS3效果適度的高清晰度照片背景XenForo主題。但是，我擔心一個相當令人討厭的縮放問題 - 尤其是在小設備上。正如你可能想象的那樣，想到一個訪客嘗試加載3G或GPRS連接上接近1兆字節的照片讓我感到很痛苦。縮放大CSS背景圖像的移動設備

所討論的背景是附接到<html>元件的固定的背景圖像。

什麼是處理規模問題的一個合適的方式？只有這麼多的壓縮我會這樣做，那麼基於JavaScript的解決方案爲視口/設備提供適當大小的圖像是否足夠有效？我還能考慮其他解決方案嗎？

感謝您的時間:)

你需要在手機上使用這個bg圖像嗎？ –

使用媒體查詢向較小的設備提供適當縮放的背景圖像有問題嗎？ – cimmanon

@cimmanon：我真的沒有想到它。然而，這是一個非常好的主意，我可能會這樣做。 –

2012-12-25 23:12:18 allyourcode

如上所述，使用CSS功能@media，您可以爲所有設備類型提供正確的圖像大小。看看Twitter的CSS框架Bootstrap。

我會建議使用所有請求小圖像，但取代它僅適用於桌面瀏覽器，但平板電腦可以同時使用，一個緩慢的互聯網連接，以及快速的無線網絡連接。這需要更復雜的解決方案。

除了使用AJAX服務於圖像可能會加快頁面很多。

2012-12-25 23:15:15 Max

回答