資訊專欄INFORMATION COLUMN
摘要：響應式圖片加載與用戶設備相匹配的圖片，既快速又不會影響用戶體驗或者服務器使用圖片使用圖片直接看代碼，就是讀取瀏覽器選擇相對應的圖片，此外還可以設置配置不同圖片。矢量圖解決響應式問題，不做描述，也是解決方式之一。
如何挑選第三方組件，輪播carousel插件，owl-carousel2
響應式圖片
圖片壓縮，與webp
如何挑選第三方組件不重復造輪子，就要選擇一個好輪子：
1.使用人數
2.是否開源
3.文檔是否齊全
4.活躍性
5.輕量級
隨便選一個，輪播的插件還是很多的owl-carousel2，符合上述條件，使用看官方文檔還是比較簡單上手的。
加載與用戶設備相匹配的圖片，既快速又不會影響用戶體驗！
1.js或者服務器
$(document).ready(function () {
function makeImageResponsive() {
var width = $(window).width();
if(width < 400){使用A圖片}else {使用B圖片}
}
$(window).on("resize load",makeImageResponsive);
})
直接看代碼，就是讀取瀏覽器width選擇相對應的圖片，此外還可以設置cookie配置不同圖片。
2.srcset和sizes
看大神的解釋
響應式圖片srcset全新釋義sizes屬性w描述符，列子如下
3.
通過媒體查詢的方式，根據頁面寬度（當然也可以添加其他參考項如是否橫屏）加載不同圖片。這樣不僅節省帶寬還能使得圖片更加適配內容。但是好事都沒有這么順利，現在很多瀏覽器不支持picture標簽。
這里就需要引入另一個概念--Polyfill
舉個例子，html5的storage(session,local), 不同瀏覽器，不同版本，有些支持，有些不支持。
我們又想使用這個特性，怎么辦？
有些人就寫對應的Polyfill（Polyfill有很多），幫你把這些差異化抹平，不支持的變得支持了（簡單來講，寫些代碼判斷當前瀏覽器有沒有這個功能，沒有的話，就寫一些支持的補丁代碼）。
你只需要把需要的Polyfill引入到你的程序里，就可以了。所以picture標簽也有它自己的polyfill--picturefill.js，引入JS則低版本瀏覽器可以兼容picture標簽。
4.svg
svg矢量圖解決響應式問題，不做描述，svg也是解決方式之一。
圖片壓縮可以給用戶帶來極大體驗度提升，UI給出的png圖通過壓縮后一般可以縮小1/3，且像素效果差不多。
推薦網站
webp是谷歌開發的圖片格式，同質量下比jpg小1/3。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116563.html
摘要：那如何做到圖片隨容器寬度變化而變化呢就像下面圖片的效果這里面的張圖片在不同寬度的容器里，圖片的寬高比始終保持不變實現原理讓圖片脫離標準文檔流，這樣就可以設置圖片的高度為然后再設置包裹圖片的父容器的或，這樣圖片才能有高度并且一直保持這個比例。 圖片響應式 在響應式開發中最煩惱的應該就是圖片了，雖然圖片設置max-width: 100%;可以讓圖片寬度占滿容器，但是高度就不能自適應了。如果...
摘要：那如何做到圖片隨容器寬度變化而變化呢就像下面圖片的效果這里面的張圖片在不同寬度的容器里，圖片的寬高比始終保持不變實現原理讓圖片脫離標準文檔流，這樣就可以設置圖片的高度為然后再設置包裹圖片的父容器的或，這樣圖片才能有高度并且一直保持這個比例。 圖片響應式 在響應式開發中最煩惱的應該就是圖片了，雖然圖片設置max-width: 100%;可以讓圖片寬度占滿容器，但是高度就不能自適應了。如果...
閱讀 1580·2021-11-25 09:43
閱讀 2485·2019-08-30 15:54
閱讀 2949·2019-08-30 15:53
閱讀 1099·2019-08-30 15:53
閱讀 757·2019-08-30 15:52
閱讀 2545·2019-08-26 13:36
閱讀 817·2019-08-26 12:16
閱讀 1220·2019-08-26 12:13
