響應式專案總結-輪播和響應式圖片

weixin_33806914發表於2017-05-04
輪播元件 OwlCarousel2

官網:https://owlcarousel2.github.io/OwlCarousel2/
安裝方法:https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
使用API找到Options中配置項
items 圖片顯示數量
loop 迴圈
autoplay 是否輪播
autoplayTimeout 切換時間
nav 上一個和下一個導航按鈕

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        items:1,
        loop:true,
        autoplay:true,
        autoplayTimeout:3000
    });
});
響應式圖片
  1. js或服務端
  2. srcset
  3. srcset配合sizes
  4. picture
  5. svg
<div class="content">
    <img src="img/480.png" alt="" 
    srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"
    sizes="(min-width:800px) calc(100vw - 30rem),100vw ">
</div>

當設定了srcset以後,瀏覽器會根據w的寬度去載入不同設定的圖片,但是如果是已經載入過1600的圖片,再縮小螢幕仍舊是1600,因為瀏覽器已經載入過1600大小的圖片,不會佔用網路資源,因此不會再去改變圖片.
當設定DPR為2的時候,也就是說用Retina螢幕時,畫素比會改變,原來的一個畫素點會有四個畫素點,但是240時,仍舊不會變,因為瀏覽器本身也還會考慮DPR值和圖片的質量,綜合演算法很複雜,因此會比240大一些.
只設定srcset的坑
當content的容器變小的時候,如果width:50%,img在240px時就會改變圖片.因此要設定sizes.
sizes="100vw"是預設值,圖片會根據sizes中的視口大小而改變相應的值,不管容器大小.
vw viewport width
vh viewport height

picture標籤
<picture>
    <source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768"/>
    <source src="img/tiananmen.jpg 1800w">
    ![](img/tiananmen.jpg)
</picture>
svg

向量圖片,不會失貞.建立svg圖片:http://editor.method.ac http://icomoon.io

polyfill

解決picture不相容問題http://scottjihl.github.io/picturefil

壓縮

svg壓縮 http://iconizr.com
png,jpg壓縮:http://tinypng.com

相關文章