這篇文章主要介紹了HTML5中picture元素響應式處理圖片的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專注于屯溪企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,商城網(wǎng)站制作。屯溪網(wǎng)站建設公司,為屯溪等地區(qū)提供建站服務。全流程定制網(wǎng)站開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務

響應式設計

所謂的響應式設計，是指在不同的屏幕分辨率，不同的像素密度比，不同寬度的終端設備中，網(wǎng)頁布局可以自適應的調整。響應式設計的本意是使原本PC上的網(wǎng)站兼容移動終端，大部分響應式網(wǎng)頁是通過媒體查詢，加載不同樣式的CSS文件實現(xiàn)的。這樣的彈性化布局使網(wǎng)站在不同的設備終端布局都比較合理。

雖然響應式設計的好處多多，但是也有諸多缺陷。由于PC端和移動終端訪問的是同一個網(wǎng)站，PC端可以不計較流量限制，但是移動端不可能不計較。

為適配不同終端機型的屏幕寬度和像素密度，我們一般會使用如下方法設置圖片的CSS樣式：

將圖片的最大寬度設置為100%，以確保圖像不會超出其父級元素的寬度，如果父級元素的寬度發(fā)生改變，圖片的寬度也隨之改變，height：auto 可以確保圖片的寬度發(fā)生改變時，圖片的高度會依據(jù)自身的寬高比例進行縮放。

這樣當我們在移動設備上訪問響應式網(wǎng)頁里的圖片時，只是把圖片的分辨率做了縮放，下載的還是PC端的那張大圖，這樣不僅浪費流量，而且浪費帶寬，而且會拖慢網(wǎng)頁的打開速度，嚴重影響用戶的使用體驗。

新的解決方案：

1. 是HTML5的一個新元素；

2. 如果元素與當前的

3. 可以根據(jù)不同的條件加載不同的圖像，這些條件可以是視窗當前的高度（viewport），寬度（width），方向（orientation），像素密度（dpr）等；

舉幾個栗子

如下栗子中針對不同屏幕寬度加載不同的圖片；當頁面寬度 在320px到640px之間時加載minpic.png；當頁面寬度大于640px時加載middle.png

2.如下栗子中添加了屏幕的方向作為條件；當屏幕方向為橫屏方向時加載_landscape.png結尾的圖片；當屏幕方向為豎屏方向時加載 _portrait.png結尾的圖片；

3.如下栗子中添加了屏幕像素密度作為條件；當像素密度為2x時加載_retina.png 2x 的圖片，當像素密度為1x時加載無retina后綴的圖片；

4.如下栗子中添加圖片文件格式作為條件,當支持webp格式圖片時加載webp格式圖片，當不支持時加載png格式圖片；

5.如下例子中添加寬度描述；頁面會根據(jù)當前尺寸選擇加載不大于當前寬度的最大的圖片；

6.如下例子中添加sizes屬性；當窗口寬度大于等于800px時加載對應版本的圖片；

兼容性：

目前只有Chrome ， Firefox ， Opera 對其兼容性較好，具體兼容性如圖：

優(yōu)點：

1. 加載適當大小的圖像文件，使可用帶寬得到充分利用；

2. 加載不同剪裁并具有不同橫縱比的圖像，以適應不同寬度的布局變化；

3. 加載更高的像素密度，顯示更高分辨率的圖像；

步驟：

1. 創(chuàng)建標簽；

2. 在這些標簽內創(chuàng)建一個你想用來執(zhí)行任何一個特性的標簽；

3. 添加一個media屬性，用來包含你想要的特性，如寬度（max-width，min-width），方向（orientation）等；

4. 添加一個srcset屬性，屬性值為相應的圖像文件名稱，進行加載。如果你想提供不同的像素密度，例如Retina顯示屏，可以添加額外的文件名到srcset屬性中；

5. 添加一個回退的標簽；

的工作原理

語法

由上面的示例代碼可知，在沒有引入js和第三方庫，CSS中沒有包含media queries的情況下，元素可以實現(xiàn)只用HTML來聲明響應式圖片；

元素

標簽它本身沒有屬性。神奇的地方是被用來當做的容器。
元素，是用來加載多媒體的比如視頻和音頻，已經(jīng)被更新用到圖片的加載并且一些新的屬性已經(jīng)被添加：

srcset (必需)

接受單一的圖片文件路徑(如：srcset=”img/minpic.png”).

或者是逗號分隔的用像素密度描述的圖片路徑(如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默認不使用的。

media (可選)

接受任何驗證的media query,你可以看到在CSS @media選擇器(如：media=”(min-width: 320px)”).

在之前的語法的例子里已經(jīng)用到了。

sizes（可選）

接收單一的寬度描述(如：sizes=”100vw”)或者單一的media query寬度描述(如：sizes=”(min-width: 320px) 100vw”).

或者逗號分隔的media query對寬度的描述(如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一個被當做默認的。

type(可選)

接受支持的MIME類型(如: type=”image/webp” or type=”image/vnd.ms-photo”)

瀏覽器會根據(jù)這些提示和屬性來加載確切的圖片資源。根據(jù)標簽的列表順序。瀏覽器會使用第一個合適的元素并忽略掉后面的標簽。

添加最后的元素

元素在內部用來當瀏覽器不支持時或者沒有源標簽匹配時的顯示。在內使用標簽是必須得，如果你忘記了，將不會有圖片顯示出來。

用來聲明默認的圖片顯示。將標簽放到內的最后，瀏覽器在找到標簽之前會忽略的聲明。這個圖片標簽也需要你寫上它的alt屬性。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5中picture元素響應式處理圖片的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!