這篇文章主要介紹HTML中如何根據(jù)屏幕大小，加載不同大小的圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元禹城做網(wǎng)站,已為上家服務,為禹城各地企業(yè)和個人服務,聯(lián)系電話:18980820575

引言今天要介紹的東西，很簡單，但是對于前端響應式的時候是個很重要的知識；我們在用bootstrap這類前端框架時，雖然頁面局部通過media query實現(xiàn)了，頁面始終無滾動條，響應式頁面。但是，bootstrap里面的img-responsive類只是通過設置圖片100%，并沒有真正的實現(xiàn)在手機上和電腦端加載不同大小的圖片。
代碼其實很簡單

下面是在瀏覽器中的結果，我們打開Chrome瀏覽器，按f12后查看網(wǎng)絡請求。

首先是三張圖片

pic1.png

默認情況下，屏幕全屏，寬度大于800

pic2.png

當頁面寬度在600px-800px（(600,800]）之間時

pic3.png

最后是頁面小于等于600px

pic4.png

針對上面的代碼，我們解釋一下：其中的img元素是默認情況下顯示的圖片源，在其上面的兩個source元素則是在特定媒體查詢（media queries）條件下顯示的圖片。

這樣我們只需要通過像寫熟悉的css的媒體查詢一樣寫代碼，就能實現(xiàn)根據(jù)瀏覽器窗口大小，動態(tài)加載圖片。在手機上，就不用加載一個電腦端才顯示的大圖。

GitHub上有位大神，基于以上的原則，編寫了一個picfill的項目，大家有興趣的可以去git上查看。

以上是“HTML中如何根據(jù)屏幕大小，加載不同大小的圖片”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標題：HTML中如何根據(jù)屏幕大小，加載不同大小的圖片-創(chuàng)新互聯(lián)
標題來源：http://weahome.cn/article/cdsijd.html