根據設備不同，加載不同尺寸圖片

針對自適應網站，圖片是最難把控的，特別是banner類型的大圖片。

js：

$(function(){
	//根據不同瀏覽設備，加載不同圖片
	pic_html();
	function pic_html(){
		if($(window).width()<720){
			$(".pic-html").attr("src","img/pic-html-mobile/banner3.png");
		}else{
			$(".pic-html").attr("src","img/pic-html/banner3.png");
		}
	}
	//當調整瀏覽器窗口的大小時，發生 resize 事件
	$(window).resize(function(){
		pic_html();
	})
})

html：（）

加載bootstrap.min.css、jquery.js、bootstrap.min.js、以及上述js

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <img style="width: 100%;" class="pic-html" src="img/pic-html/banner3.png" />
        </div>
    </div>
</div>

總結：$(window).width()得窗口大小

$(window).resize():當調整瀏覽器窗口大小時，發送resize事件

疑問：可將圖片放於div的background中嗎？

思考：寬度可以自適應，高度呢，不設置能夠顯示嗎

之後實際操作中再實際操作。