老生常談之響應(yīng)式開發(fā)

csRyan 發(fā)布于2019-08-30 11:10 / 1101人閱讀

摘要：什么是響應(yīng)式設(shè)計(jì)作為一名合格的前端開發(fā)攻城獅工程師，做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢這個(gè)時(shí)候響應(yīng)式開發(fā)就應(yīng)運(yùn)而生了。五標(biāo)簽的屬性除了響應(yīng)式圖像，標(biāo)簽還可以用來(lái)選擇不同格式的圖像。

什么是響應(yīng)式設(shè)計(jì)？

作為一名合格的前端開發(fā)攻城獅（工程師），做的最多的恐怕就是多端適配，多端兼容的工作了吧，那么如何解決一套代碼多端并行且多端適配呢？這個(gè)時(shí)候響應(yīng)式開發(fā)就應(yīng)運(yùn)而生了。什么是響應(yīng)式設(shè)計(jì)？什么又是響應(yīng)式圖像呢？
我們來(lái)了解什么是響應(yīng)式設(shè)計(jì)：網(wǎng)頁(yè)在不同的設(shè)備上，都可以達(dá)到讓使用者感覺比較舒適的合理的視覺體驗(yàn)，叫做“響應(yīng)式設(shè)計(jì)”（responsive web design）。
由響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)圖像，就叫做響應(yīng)式圖像

響應(yīng)式的解決方案有很多，JavaScript 和css都可以實(shí)現(xiàn)，這里我們了解一種最簡(jiǎn)單的，語(yǔ)義最好的HTML的解決方案，而且瀏覽器都原生支持的。

一、由img標(biāo)簽引起的問(wèn)題

這一行代碼在移動(dòng)端和PC端，插入的都是圖片screen.png文件
這種方式雖然簡(jiǎn)單高效，可以多端并行，但是有很多的弊端：
1、體積比較大。假設(shè)來(lái)說(shuō)我們這個(gè)圖片有300Kb，在PC端可以使用較大的尺寸，那么在移動(dòng)端，我么就需要一個(gè)看起來(lái)比較符合舒服的尺寸，這樣既可以節(jié)省帶寬，降低服務(wù)器的壓力，也可以更快的讓圖片渲染出來(lái)，提供良好的用戶體驗(yàn)。
2.像素密度問(wèn)題。做過(guò)移動(dòng)端的開發(fā)的攻城獅都了解過(guò)PC的渲染和移動(dòng)端的渲染是不一樣的。PC端一般是單倍的像素密度，而手機(jī)上的顯示器往往是多倍的像素密度。這樣的后果就是我們同樣一張圖，在PC上很清晰，到手機(jī)上渲染的時(shí)候看起來(lái)就很模糊，因?yàn)橄袼財(cái)U(kuò)充了。
3.視覺體驗(yàn)。因?yàn)槲覀冏烂婕?jí)別的顯示器屏幕的面積更大，可以暴露出來(lái)很多圖像的細(xì)節(jié)，但是手機(jī)屏幕比較小，很多細(xì)節(jié)是無(wú)法看清楚的，需要突出重點(diǎn)

二、圖片大小的選擇

為了解決體積問(wèn)題希望不同尺寸的屏幕，顯示不同大小的圖像，我們需要srcset屬性搭配sizes屬性。