響應式圖片載入3種方式

響應式選擇合適的圖片進行加載，對於流量不那麼拮据的今天而言，應該仍是前端人員改不掉的習慣，就是單純的更好地展現圖片

應用場景：

　　1. 相同圖片，尺寸不一樣;

　　2. 不一樣圖片，響應式選擇。

三種方式：

　　1. media查詢；

　　2. img屬性 srcset+sizes；// 這個有一個小弊病，對於加載完成了的圖片，動態調整視口大小，只是操做成功加載的那張圖片的顯示尺寸（改換不了資源就是跟換不了圖片）

　　3. picture + source。

=====================================開始！

　　① media 你們很熟了，很少說。。

　　　　　　有個地方提一下：僅用css的話（不用less或者sass），須要改換資源（不一樣的圖片），

　　　　　　那麼使用background-image會給你省很多麻煩，利用media限制條件 -> 更換url地址。

因此設置的常有：

@media  screen and (min-width: 1200px) {

}

@media  screen and (min-width: 992px) {

}

@media  screen and (min-width: 768px) {

}

@media screen and (min-width: 480px) {

}

 

 　　

　　②  srcset配合sizes ：

　　　　　　怎麼寫？

 1 <img
 2   srcset="
 3     ./img/1-320.png 320w,
 4     ./img/1-480.png 480w,
 5     ./img/1-800.png 800w
 6   "
 7   sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,(max-width: 768px) 700px, 1000px"  
 8   src="./img/elva-fairy-800.png" 
 9   alt="相同的3張圖片，不一樣尺寸大小" 
10 />

320w、480w、800w能夠當作是圖片原始寬度大小

對應的尺寸範圍：0-320px，320-480px，480-768px，768px以上；

對應img的width：280px、440px、700px、1000px

對應選擇的圖片是： 1-320.png、1-480.png、1-800.png、1-800.png

　

可是，當換成下面的條件，選擇加載的圖片發生了變化

1 sizes="(max-width: 320px) 350px,(max-width: 480px) 440px,(max-width: 768px) 800px, 1000px"

對應的尺寸範圍：0-320px，320-480px，480-768px，768px以上；

對應img的width：350px、440px、800px、1000px

對應選擇的圖片是： 1-480.png、1-480.png、1-800.png、1-800.png

 

該段小結：

1. img本身從srcset集中選擇圖片，優先選擇大於顯示尺寸的圖片進行等比壓縮來顯示; // 實際300kb的圖片，加載可能只須要100kb了

如上，350 > 320,那麼img標籤就會選擇加載480的，等比壓縮到350px寬，顯示

2. 沒有合適的更大圖片，就會把本身加載的最大的進行等比放大，來顯示; // tip： 800px->1000px還能夠接受，500px->1000px，不要太糊哦　

如上, 768px後設置寬度1000px，將加載的1-800.png的圖片進行等比放大到1000px寬，顯示

3. 可使用'vw'這樣的單位，代替上面的'px'，來使得你的圖片根據視口平滑地調整大小

好比這樣：

sizes="(max-width: 320px) 100vw,(max-width: 480px) 50vw, 800px"　

　　

 

③ picture + source 

　　　　注意： 雖然被picture標籤包裹的有兩張圖片source，可是加載的時候只會選擇一張加載

1 <picture>
2   <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" />
3   <source 4     srcset="./imgs/banner-1920X960.jpg"
5  media="(min-width: 992px)"
6   />
7   <img src="./imgs/banner-1920X960.jpg" alt="banner-pic" width="100%" />
8 </picture>

 

picture標籤包容性好，你能夠放上<a>或者<map>+<area>,來給你的圖片加上跳轉連接，

下邊的，我把他們放一塊兒了，用的話，用其一就好，要麼用<a>，要麼用<map>+<area>

 1 <picture id="banner_pics">
 2     <a href="http://wwww.baidu.com" class="more-info">瞭解更多</a> 
 3     <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" />
 4     <source srcset="./imgs/banner-1920X960.jpg" media="(min-width: 992px)" />
 5     <img src="./imgs/banner-1920X960.jpg" alt="" usemap="#myMap" />
 6     <map name="myMap" id="myMap">
 7     <area
 8         shape="rect"
 9         coords="43.75%, 74.69%, 56.35%, 83.64%"
10         href="http://www.baidu.com"
11         target="_blank"
12         alt="baidu"
13     />
14     </map>
15 </picture>

 

 沒什麼好總結的，用獲得就試試吧，

畢竟，如今用vue、react不多操做dom了，再來個微信小程序，mpvue啥的。。。

可能偶爾騷一下，把它們寫在template裏邊，哈哈哈^_^