更加智能好用的倍圖展開方式

背景

昨天忽然i想起來前兩年嘗試過的img-srcset這個屬性，當時趕着完成課程設計，在firebox發現有效果，在chrome上半點用都沒，可是這玩意的兼容性以下：

imgset兼容性

其實兼容性我以爲挺好的，因此我仍是要再嘗試嘗試！

介紹

srcsert具備兩個版本：

1. 舊版

   ![](mm@1x.jpg)複製代碼

2. 新版

   <img src="./img/x-pc.png"
        srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w"
        sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">複製代碼

emm.....舊版不想說了，反正很差用也已經被淘汰了，新版的，其實很簡單：

1. srcset這個屬性定義圖片而後告訴瀏覽器你圖片的寬度
2. sizes這個屬性定義在不一樣狀況下，對於圖片寬度的定義，單位除了不能使用%（很費解，不過能夠用vw代替），calc()也能夠

看一看

• 寬度250px狀況下

250px

• 寬度300px狀況下

300px

懶得錄gif，當你寬度慢慢增大一個臨界點時瀏覽器會去加載二倍圖而且替換，sizes規定了圖片的大小，好比第一個例子上圖片大小恆定500px，注意sizes的合理設置，不然會產生圖片大小的跳動，獲得兩個結論：

1. 優先適配高質量圖片原則
2. 存在緩存時優先加載緩存圖片

進階

咱們來探究一下w這個單位，先從sizes這個屬性提及。
sizes至關於動態定義圖片的width和height，而後咱們把上面的例子作一些修改：

<img src="./img/x-pc.png"
        srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
        sizes="(min-width: 200px) 400px, calc(100vw - 20px)">複製代碼

150px

171px

圖1： 2 （150px - 20px）
圖2： 2 （171px - 20px）
我我的的理解是：w只是告訴瀏覽器，我認爲這張圖是什麼大小，瀏覽器會根據你給的值取計算出一個比值，好比上面這個比值是2，而後去乘下面的sizes，公式就是：
實際渲染大小 = （原圖大小 / 聲明大小） * 對應的sizes

爲何這麼作呢？

我猜想，若是按w等於圖片寬度的話，在高質量的圖片下並不合適，因此w只是起到一個描述圖片尺寸做用，就和你爸媽同樣，我以爲XXXXXX。

結論

我瞎寫，你隨便看看就好，以爲哪裏不對能夠留言