Respify響應式圖像庫

Respify 是個簡單的響應式圖像庫，可以從一系列 span 子節(jié)點的 data-media 和 src 屬性解析圖像，使用媒體查詢來選擇圖像。在線演示

Respify可以在圖像標簽或任何其他標簽上使用，但背景選項應設置為true。從span子節(jié)點數(shù)組中重新指定wil pop，這意味著將首先解析列表中的最后一個節(jié)點。如果Respify找到一個匹配的媒體查詢，它將使用相應的圖像并停止搜索。

<span id="default-responsive" class="responsive-img" data-alt="This is an example of a responsive image">
	<span src="img/[email protected]" data-media="(max-width: 30em)"></span>
	<span src="img/[email protected]" data-media="(min-width: 30em) and (max-width: 48em)"></span>
	<span src="img/[email protected]" data-media="(min-width: 48em) and (max-width: 60em)"></span>
	<span src="img/[email protected]" data-media="(min-width: 60em) and (max-width: 80em)"></span>
	<span src="img/[email protected]" data-media="(min-width: 80em)"></span>

	<noscript><img src="ext/img/[email protected]" alt="A yacht race"></noscript>
</span>