背景
昨天突然i想起來前兩年嘗試過的img-srcset這個屬性舶胀，當(dāng)時趕著完成課程設(shè)計盅安，在firebox發(fā)現(xiàn)有效果髓废，在chrome上半點用都沒懒棉，但是這玩意的兼容性如下：
imgset兼容性
其實兼容性我覺得挺好的草描，所以我還是要再嘗試嘗試！
介紹
srcsert具有兩個版本：
- 舊版
- 新版
<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.....舊版不想說了策严，反正不好用也已經(jīng)被淘汰了穗慕，新版的，其實很簡單：
-
srcset這個屬性定義圖片然后告訴瀏覽器你圖片的寬度 -
sizes這個屬性定義在不同情況下妻导，對于圖片寬度的定義逛绵，單位除了不能使用%（很費解怀各，不過可以用vw代替），calc()也可以
看一看
- 寬度250px情況下
250px
- 寬度300px情況下
300px
懶得錄gif术浪，當(dāng)你寬度慢慢增大一個臨界點時瀏覽器會去加載二倍圖并且替換瓢对，sizes規(guī)定了圖片的大小，比如第一個例子上圖片大小恒定500px胰苏，注意sizes的合理設(shè)置硕蛹，否則會產(chǎn)生圖片大小的跳動，得到兩個結(jié)論：
- 優(yōu)先適配高質(zhì)量圖片原則
- 存在緩存時優(yōu)先加載緩存圖片
進階
我們來探究一下w這個單位硕并，先從sizes這個屬性說起法焰。
sizes相當(dāng)于動態(tài)定義圖片的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只是告訴瀏覽器倔毙，我認為這張圖是什么大小埃仪，瀏覽器會根據(jù)你給的值取計算出一個比值，比如上面這個比值是2陕赃，然后去乘下面的sizes卵蛉，公式就是：
實際渲染大小 = （原圖大小 / 聲明大小） * 對應(yīng)的sizes
為什么這么做呢么库？
我猜測毙玻，如果按w等于圖片寬度的話，在高質(zhì)量的圖片下并不合適廊散，所以w只是起到一個描述圖片尺寸作用，就和你爸媽一樣梧疲，我覺得XXXXXX允睹。
結(jié)論
我瞎寫，你隨便看看就好幌氮，覺得哪里不對可以留言
