傳統(tǒng)觀點(diǎn)認(rèn)為，大的圖片會(huì)賣(mài)出去。更主觀的觀點(diǎn)告訴我們大的圖像是漂亮的。不管什么原因，我們喜歡我們的大圖像。更重要的是，我們真的喜歡把它們放在背景中，把大的文本放在上面。

我不是來(lái)討論我們是否應(yīng)該這樣做的。即使我認(rèn)為大背景圖片是網(wǎng)頁(yè)設(shè)計(jì)的禍根(我不知道)，人們還是會(huì)繼續(xù)使用它們。,包括我。他們大。他們是漂亮的。不喜歡什么?

他們?cè)谖覀兊募w工具箱里占有一席之地，但我們需要把它們做好。我不是說(shuō)要選擇正確的圖像，這取決于你。我說(shuō)的是確保我們的圖像不會(huì)謀殺人們的帶寬。如果我們真的要設(shè)計(jì)“移動(dòng)優(yōu)先”，那就必須包括我們的圖像。

這個(gè)問(wèn)題
現(xiàn)在，當(dāng)人們想要填充一個(gè)頁(yè)面的背景，或者僅僅是一個(gè)相當(dāng)大的div時(shí)，他們通常只使用這樣的CSS(我分別用每個(gè)屬性來(lái)明確):


身體,.bigdiv {
背景圖片:url(路徑/ / image.jpg);
background-size:封面;
}
現(xiàn)在，對(duì)于臺(tái)式機(jī)和任何有無(wú)限數(shù)據(jù)的互聯(lián)網(wǎng)來(lái)說(shuō)，這都是不錯(cuò)的選擇，但如果越來(lái)越多的移動(dòng)用戶(hù)想要玩，那該怎么辦呢?你真的要讓他們下載那些潛在的巨大的。jpeg到他們的手機(jī)上，花費(fèi)他們實(shí)際的錢(qián)嗎?

閱讀更多關(guān)于響應(yīng)性設(shè)計(jì):
響應(yīng)式設(shè)計(jì):使您的字體設(shè)計(jì)工作。
保持競(jìng)爭(zhēng)力-學(xué)習(xí)響應(yīng)性設(shè)計(jì)。
響應(yīng)性的圖像-為什么它是必須的和4種方法來(lái)完成它。
反應(yīng)性設(shè)計(jì):你需要知道的。
為智能設(shè)計(jì)提供響應(yīng)性設(shè)計(jì)書(shū)籍。
我們有三種解決方案，給我們提供有響應(yīng)的背景圖像:
媒體查詢(xún)
圖像集屬性
*響應(yīng)的背景圖像(稍后會(huì)詳細(xì)介紹)
媒體查詢(xún)
這個(gè)是很明顯的解。定義一個(gè)小背景圖像。然后，對(duì)于越來(lái)越大的屏幕尺寸，您使用媒體查詢(xún)來(lái)定義越來(lái)越大的背景圖像。

例如，你會(huì)使用這樣的CSS:


身體{
背景:url(圖片/ small-image.jpg);
}
@media screen和(min-width: 700px) {
身體{
背景:url(圖片/ larger-image.jpg);
}
}
優(yōu)勢(shì)
這是顯而易見(jiàn)的解決方案。我們使用的是純CSS，不需要更改標(biāo)記。

問(wèn)題
這種方法帶來(lái)了一個(gè)問(wèn)題:移動(dòng)瀏覽器，尤其是老的瀏覽器，會(huì)傾向于下載所有的圖像，從而破壞了運(yùn)動(dòng)的目的。好消息是有變通辦法。壞消息是:它們是變通方法。他們?cè)谀J(rèn)情況下有點(diǎn)臃腫。

盡管如此，他們?nèi)匀还ぷ鞯煤芎谩Ｈ绻胍獙W(xué)習(xí)它們，請(qǐng)檢查這個(gè):媒體查詢(xún)和資產(chǎn)下載結(jié)果。

圖像集
所有的圖像集都提供一個(gè)圖像列表，這些圖像通常除了大小之外都是相同的。與srcset HTML屬性一樣，瀏覽器將根據(jù)設(shè)備自行決定哪種圖像更好下載。

我為這兩種解決方案都包含了源文件，因此您可以在操作中看到它們。你可以在下面下載。現(xiàn)在，你需要知道的是:

HTML

< !DOCTYPE html >
< html lang =“en”>
<頭>
< meta charset = " utf - 8 " >
<標(biāo)題>純CSS響應(yīng)背景圖像演示。
< / >頭
<身體>

<h1>純CSS響應(yīng)背景圖像演示</h1>。
< /身體>
< / html >
(基本)的CSS

身體{
背景圖片:圖像集(
url(regular-image.jpg)1 x,
url(double-sized-image.jpg)2 x
);
}
問(wèn)題
讓我們暫且先不考慮瀏覽器對(duì)圖像集屬性的支持，這一事實(shí)并不是它所需要的。讓我們忽略需要做這項(xiàng)工作的供應(yīng)商前綴。真正的問(wèn)題是，圖像不是根據(jù)屏幕/視圖的大小來(lái)選擇的，而是基于像素密度。

這意味著它很適合在視網(wǎng)膜屏幕和普通屏幕之間切換。需要一個(gè)更大的圖像來(lái)處理那些巨大的iMac屏幕?圖像集函數(shù)在這里提供幫助。如果這是您所需要的，那么映像集是為您準(zhǔn)備的。

你可以用它來(lái)做小的圖片:圖標(biāo)，頭像，以及其他類(lèi)似的東西。它們足夠小，不會(huì)破壞移動(dòng)用戶(hù)的數(shù)據(jù)計(jì)劃。但是我們想要大量的背景圖像，對(duì)吧?所以這個(gè)解還沒(méi)準(zhǔn)備好。

完全響應(yīng)背景圖像
因此，到目前為止，我們都看到了我們需要的:基于屏幕/viewport大小的響應(yīng)圖像，我們希望瀏覽器只下載其中一個(gè)。你猜怎么著?我們可以這么做。

壞消息是，它需要更改您的標(biāo)記。然而，這種變化是微乎其微的。您需要做的只是添加一個(gè)div和背景圖像本身。

這整個(gè)事情的工作原理是兩個(gè)概念:*定位和srcset HTML屬性。*定位已經(jīng)存在一段時(shí)間了，它只是像它應(yīng)該做的那樣工作。沒(méi)什么好擔(dān)心的。另一方面，srcset屬性是更新的，并且不太受支持。

然而，根據(jù)*新的使用統(tǒng)計(jì)數(shù)據(jù)，srcset得到了一些mobi的支持。 本文來(lái)源：智通澤軟件，轉(zhuǎn)載請(qǐng)注明出處！如果需要泊頭網(wǎng)站建設(shè) 泊頭小程序開(kāi)發(fā) 泊頭微信開(kāi)發(fā) 泊頭APP開(kāi)發(fā)請(qǐng)聯(lián)系封經(jīng)理，我們將提供上門(mén)服務(wù)！
聯(lián)系方式：手機(jī)：13393374114  座機(jī)：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：