我有一個我開發的網站，但我剛剛從一個在2560 x 1600顯示器上看它的人那裏獲得了一個截圖，看起來有些荒謬。什麼是支持屏幕分辨率的合理上限？我擔心通過添加巨大圖像會對加載時間產生負面影響。我如何正確處理這個問題？你如何支持網站背景圖片的大屏幕分辨率？

2016-12-01 CanadaIT

我會創建不同大小的多個版本的背景圖像，並使用媒體查詢將它們應用爲視口寬度增加。此網站顯示桌面屏幕尺寸統計信息，以幫助您選擇最大寬度http://gs.statcounter.com/#desktop-resolution-ww-monthly-201510-201610-bar –

您也可以嘗試將圖像縮放2倍並設置JPG壓縮到0％以節省幾個字節https://www.filamentgroup.com/lab/compressive-images.html –

解決方案1：最大寬度

使用div容器與下面的CSS：

#innerbody { 
    width: 100%; 
    max-width: 2000px; 
    margin: 0 auto; 
}

把所有的HTML在這個容器（環繞所有HTML容器），像這樣：

<body> 
    <div id="innerbody"> 
    ... your page ... 
    </div> 
</body>

我也會爲身體添加一個不錯的微妙背景顏色，以標記「頁面」結束的位置，如下所示：

body {background: #eee;} 
#innerbody {background: #fff;}

解決方案2：面膜質量

如果你只擔心（差）的圖像質量，您可以添加div容器（從溶液中1），並使用這個CSS來覆蓋艙口（對角線）。這個技巧通常用於低質量的全屏視頻，但也適用於背景圖像。

#innerbody { 
    width: 100%; 
    background: url(/hatch.png); 
}

解決方案3：媒體查詢

有一個大屏幕？你會得到一個大的形象。有一個小屏幕？你會得到一個小圖像。聽起來合乎邏輯，對嗎？您可以通過使用媒體查詢來實現此目的。這是這樣工作的：

@media screen and (max-width: 500px) { 
    body { 
    background: url(small_image.jpg); 
    } 
} 
@media screen and (max-width: 1000px) and (min-width: 501px) { 
    body { 
    background: url(medium_image.jpg); 
    } 
} 
@media screen and (max-width: 2000px) and (min-width: 1001px) { 
    body { 
    background: url(big_image.jpg); 
    } 
} 
@media screen and (min-width: 2001px) { 
    body { 
    background: url(really_big_image.jpg); 
    } 
}

對於每個屏幕大小其中一個媒體查詢將爲true。該圖像將被送達。

來源

2016-12-01 19:11:49 JoostS

爲了解決您的加載時間問題，一個選擇是使用媒體查詢，以便您可以根據訪問者視口大小控制背景圖像。例如

@media (max-width: 800px) { 
    .div-with-background{ 
     background-image: url("background-sm.jpg"); 
    } 
} 

@media (max-width: 1200px) { 
    .div-with-background{ 
     background-image: url("background-md.jpg"); 
    } 
} 

@media (min-width: 1201px){ 
    .div-with-background{ 
     background-image: url("background-lg.jpg"); 
    } 
}

什麼是合理的上限爲屏幕分辨率支持？

這取決於您的訪問者。如果你使用谷歌分析，你可以通過轉到用戶>技術>瀏覽器& OS並在'次級尺寸'搜索'屏幕分辨率'

希望這會有所幫助！

來源

2016-12-01 19:44:21

你如何支持網站背景圖片的大屏幕分辨率？

回答

解決方案1：最大寬度

解決方案2：面膜質量

解決方案3：媒體查詢

相關問題