響應式圖像終于有(yǒu)超贊的(de)解決方案了♣•∞(le)！

固定寬度圖像：基于設備像素比選擇

視(shì)網膜屏幕的(de)廣泛應用(y← ↓↔òng)，使我們不(bù)僅需要(yào)考慮屏幕分(fēn)$₽↓‍辨率，而且也(yě)需要(yào)考慮像素密度。視(₩≠shì)網膜屏幕，4K顯示器(qì)，UltraHD-它們都(dōu)比相¥≠α(xiàng)同尺寸的(de)标準分(fēn)辨率顯示器(qìσ♦)填充了(le)更多(duō)的(de)像素。更多(duō)的(™<de)像素=更清晰的(de)圖像。

有(yǒu)些(xiē)圖片不(bù)管屏幕尺寸，始終以固定±™寬度顯示-如(rú)站(zhàn)點logo或人(rén)物(wù)簡介圖±§像，也(yě)就(jiù)是(shì)說₹<♦(shuō)需要(yào)根據設備像素比來§¥(lái)選擇。浏覽器(qì)将根據設備像素比來(φ•±lái)選擇加載哪張圖像。

srcset屬性列出了(le)浏覽器(qì)可(kě)以選擇加載的(de)源圖像池，是↑ε (shì)一(yī)個(gè)由逗号分(≠★$fēn)隔的(de)列表。x描述符表示圖像的(de)設備像素比。浏覽器(qì)根據運行(xíng)環‌‍境，利用(yòng)這(zhè)些(xiē₽♦©↔)信息來(lái)選擇适當的(de)圖像。不(bù)理(lǐ)→Ω‌β解srcset的(de)浏覽器(qì)會(huì)直接加載src屬性中聲明(míng)的(de)圖像。

上(shàng)例中，我們告訴浏覽器(qì)在viewport寬度小(x₩≈iǎo)于400像素時(shí)，使圖像的(de)寬度與viewp&α★™ort等寬。在viewport寬度小(xiǎo)于960像素時(s→‌hí)，使圖像的(de)寬度為(wèi)vie§λwport寬度的(de)75％。當viewport大(dà₹≤)于960像素時(shí)，使圖像的(de)寬↓§₩β度為(wèi)640像素。如(rú)果你(nǐ)不(bù)熟悉vw ，可(kě)以看(kàn)看(kàn)Tim Severien的(de)大(dà)文(wén)viewport單位詳解 。

浏覽器(qì)利用(yòng)srcset和(hé)sizes信息來(lái)選擇***規定條件(jiàn)的(de)圖像。如(rú)‌ ∞果浏覽器(qì)的(de)viewport是(shì)600像素，圖像最可(♦∞®βkě)能(néng)以75vw的(de)寬度顯示。浏覽器(qì)将嘗試加載***張大$‌(dà)于450像素（600*0.75）的φ≤≤(de)圖像，也(yě)就(jiù)是(shì)uswnt-480.jpg。如(rú)果我的(de)是(shì)dpr ¥β為(wèi)2的(de)Retina顯示屏，那(n®£à)麽浏覽器(qì)就(jiù)會(huì)嘗試加載*←'€**張大(dà)于900像素（600*0.75*2）的(de)圖Ω¶φ→像，也(yě)就(jiù)是(shì)uswnt-960.jpg。我們無法确定究竟顯示哪張圖像，因為(wèi)每個(γ∏gè)浏覽器(qì)根據我們提供的(de)信息挑選适當圖像的(de)₽♣✘$算(suàn)法是(shì)有(yǒu)差異"§β的(de)。(譯者注：srcset和(hé)size列表‌φ是(shì)對(duì)浏覽器(qì)的(de)一(yī)個(g<γè)建議(yì)(hint)，而非指令。例如(rú)，設備♣÷像素比(dpr)為(wèi)1.5的(de)設備，亦可(kě¥↔↔∞)用(yòng)1x也(yě)可(kě)用(yòng)2x的(de)圖像，®→由浏覽器(qì)根據其能(néng)力、網絡÷↕₩等因素來(lái)決定。)

前兩個(gè)例子(zǐ)都(dōu)是(shì)以≥​≠不(bù)同質量顯示相(xiàng)同的(de)圖✘≥ε像，僅用(yòng)srcset屬性就(jiù)足夠了(le)。不(bù)必擔心老​¥λ(lǎo)舊(jiù)浏覽器(qì)，老(lǎo)舊(♥≥↑×jiù)浏覽器(qì)會(huì)把它看(kàn)作(zuò)為(wèi)一(<→yī)個(gè)普通(tōng)的(de)圖像并從(cóng)src中加載。如(rú)果你(nǐ)想在不(bù)同寬度下(xià)顯示稍微☆λ≤(wēi)不(bù)同的(de)圖像，比如(rú)在較窄αα♥ 屏幕下(xià)僅顯示圖像的(de)關鍵部分(fēn)，那(n§★♣à)麽要(yào)使用(yòng)picture元素。

picture：基于Art direction（美(mβ®λ₽ěi)術(shù)設計(jì)）選擇

picture元素就(jiù)像是(shì)圖像和(h'÷↓é)其源的(de)容器(qì)。浏覽器(qì)仍然需要(yàoγ₩↔​)img元素，用(yòng)來(lái)表明(míng)需'₹↕要(yào)加載圖片，如(rú)果沒有(yǒu)img，那(nà)麽什(shén)麽都(dōu)不(bù)會(h<¥ uì)渲染。source為(wèi)浏覽器(qì)提供了(le)要(yào)​§顯示圖像的(de)供選版本。基于美(měi)術(shùγ♣§)設計(jì)選擇的(de)适用(yòng)場(chǎng)景為∑♦α(wèi)：在一(yī)個(gè)特定的(de)轉效點（‌∑"breakpoint）需要(yào)顯示一(yī)個(gè)特定的(de™↓)圖像。使用(yòng)picture元素選擇圖像，不(bù)會(huì)有( ≈≥γyǒu)歧義。