2012-08-03 103 views
1

手機網站我有一個大的圖像背景鉛生成頁面http://minkstock.com一個大背景圖片網站

我想使它手機兼容,但不希望加載我使用的背景桌面上的巨大圖像和平板網站。

這是防止它在手機上加載的最佳方法。

+4

CSS媒體查詢 - >不同的圖像設置爲背景不同的圖像 – kirilloid 2012-08-03 21:59:45

+0

@kirilloid因爲我設置圖像重置爲全長我使用這種方法http://paulmason.name/item/full-screen-background -image-pure-css-code – 2012-08-03 22:03:23

+0

只是一點點:在主頁註冊表單上,你有兩個Ls的Emaill地址:) – VictorKilo 2012-08-03 22:06:14

回答

2

@devundef是對的。我們通常從CSS調用背景圖像。在這種情況下,CSS3媒體查詢就足夠了。我也建議遵循這個規則。

可選(如果你不想採用css背景): 你有沒有選過Foresight.js plugin?它檢測瀏覽器以及數據網絡:https://github.com/adamdbradley/foresight.js

它爲您提供了根據用戶瀏覽器和連接類型進行自適應圖像替換的選項。好的是你不必刪除你的背景,並且能夠保持UI的一致性。

2

您可以使用CSS媒體查詢。

例子:

// this background will apply only for screen sizes between 320 and 480px 
@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    background-image: none; // or another image... 
} 

更多信息: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

+0

因爲我設置圖像重置爲全長我正在使用此方法paulmason.name/item/full-screen-background-image-pure-css-code – 2012-08-03 22:03:39

+0

因此?您仍然可以使用它,但將該CSS規則放入與大屏幕相匹配的媒體查詢中,並使用另一個媒體查詢用於小屏幕併爲其定義另一個背景圖像... – devundef 2012-08-03 22:06:38

+0

我正在使用圖像作爲img對象html。 – 2012-08-03 22:08:57

2

由於@devundef建議,可以利用媒體查詢。但是,您的基本實現應該是針對媒體查詢的移動體驗,以覆蓋全尺寸圖像的背景。