(六)：picture元素

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/

在第3，4，5部分中，我們專注于分辨率切換的解決方案?，F(xiàn)在是時(shí)候來(lái)研究如何解決藝術(shù)指導(dǎo)了。

<picture>元素——尤其是媒體屬性——被設(shè)計(jì)來(lái)簡(jiǎn)化藝術(shù)指導(dǎo)。

<picture>元素包含一系列<source>子元素后跟著需要的<img>元素。source元素原理和video元素的子源類似。

<picture>
  <source media="(min-width: 900px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

每個(gè)源必須有一個(gè)srcset屬性，可選屬性包括media，sizes和type。<source>元素上的sizes和srcset的使用和<img>上完全一樣。

我們現(xiàn)在主要研究media屬性。

media屬性

media屬性的值是媒體查詢。與sizes屬性的媒體情況不同，這里的媒體查詢是你熟知并喜愛(ài)的且功能完整。

當(dāng)瀏覽器檢查source元素列表時(shí)，使用第一個(gè)媒體查詢匹配的源。如果沒(méi)有媒體查詢匹配，則使用<img>元素。

media屬性是指令，而不是建議

不像是srcset和sizes，當(dāng)使用媒體屬性，你在告訴瀏覽器應(yīng)該使用哪個(gè)源。

瀏覽器無(wú)法自由選擇一個(gè)不同源。它必須使用第一個(gè)媒體屬性匹配當(dāng)前瀏覽器狀況的第一個(gè)<source>元素。

這就是帶有媒體屬性的<picture>元素非常適合藝術(shù)指導(dǎo)的原因。在藝術(shù)指導(dǎo)的使用情況中，設(shè)計(jì)師必須確保在特定視口尺寸下使用的圖片與他們預(yù)期的一致否則設(shè)計(jì)可能會(huì)被破壞。

讓我們來(lái)實(shí)際看一下。

實(shí)際情況下的picture元素

Shopify?使用<picture>元素來(lái)解決藝術(shù)指導(dǎo)的問(wèn)題。Shopify’s在主頁(yè)上突出了一個(gè)顧客，Corrine Anestopoulos，Biko?Jewelry的聯(lián)合創(chuàng)始人。

在狹窄的屏幕上，Anestopoulos小姐的照片被裁減。因?yàn)閳D片不再是被簡(jiǎn)單縮小，這就是考慮到藝術(shù)指導(dǎo)的情況。

Shopify使用的標(biāo)記將<picture>元素和srcset顯示密度描述符結(jié)合。我為了簡(jiǎn)化標(biāo)記而移除了冗長(zhǎng)的圖片路徑并總結(jié)如下：

<picture>
  <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

注：新改版的頁(yè)面代碼：

<picture class="">
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="muttonhead-feature@desktop-a97f32476dec8ace5bff5581de852720.png 1x, muttonhead-feature@desktop-2x-9dfadafd12daaa37357521b5cfeb71c9.png 2x" media="(min-width: 990px)">
  <source srcset="muttonhead-feature@tablet-098c9c293a9fc4625c4e3881c293d284.png 1x, muttonhead-feature@tablet-2x-9e850f53007aca09e7c3b58d7b6d2ba1.png 2x" media="(min-width: 750px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="muttonhead-feature@mobile-46b2bcd7fba4a422861fece5231085a3.png 1x, muttonhead-feature@mobile-2x-4e12c2522c827b69b53ad706aeaf6ba9.png 2x" alt="Shopify online store" class="">
</picture>

縮小你的瀏覽器窗口大小，你能看到圖片的更換過(guò)程

仔細(xì)觀察這些代碼，Shopify使用了三個(gè)不同的圖片斷點(diǎn)。每個(gè)斷點(diǎn)的圖片寬度固定－斷點(diǎn)間的寬度轉(zhuǎn)變是跳躍的而不是連續(xù)的。

因?yàn)閳D片寬度固定，[srcset顯示密度描述符]((http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)就派上作用。因此對(duì)于每個(gè)斷點(diǎn)來(lái)說(shuō)，Shopify定義了一個(gè)`1`倍和一個(gè)`2`倍源文件。分解開(kāi)來(lái)如下所示：

• <source … media="(min-width: 990px)">:最大尺寸的圖片，Shopify把它稱為桌面，是第一個(gè)圖片源。媒體屬性告訴瀏覽器這個(gè)源只有在視口寬度大于或等于990px才被使用。
• <source … media="(min-width: 750px)">:第二個(gè)源，“平板”圖片，視口寬度大于或等于750px時(shí)使用。因?yàn)榈谝粋€(gè)源在990px時(shí)起作用并且瀏覽器選擇匹配的第一個(gè)源，第二個(gè)源的有效視口寬度范圍是750px到989px。
• <img>:如果前兩個(gè)源沒(méi)有匹配，說(shuō)明視口寬度一定小于750px。這種情況下，會(huì)使用<img>元素上srcset。小屏幕會(huì)使用”移動(dòng)設(shè)備”圖片。

如果圖片寬度自適應(yīng)而不固定，Shopify本可以使用帶srcset寬度描述符的<picture>而不是顯示密度描述符。

最后一點(diǎn)小技巧

遇到藝術(shù)指導(dǎo)的情況，你會(huì)需要picture元素。另外picture規(guī)范的創(chuàng)造者還給網(wǎng)頁(yè)開(kāi)發(fā)帶來(lái)了一份最終的大禮。在下一節(jié)中，將會(huì)向大家介紹圖片的新格式相關(guān)知識(shí)，將帶領(lǐng)大家進(jìn)入圖片格式的新世界之中。