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