純CSS（無 JavaScript）實現的響應式映像顯示

　　有許多方法可以實現web頁面裡映像的應答。然而，我碰到的所有方案都使用了JavaScript。這使我疑惑不用JavaScript實現映像響應是否可行。

　　我提出了下面純CSS的方案。

　　它是如何工作的呢？

　　我把<img>標籤防止在<span>內。src屬性將從伺服器獲得手機版本的映像。接著我還在<span>元素內部包含了一點CSS。

　　什嗎？？HTML文檔中能嵌入了CSS?

　　是的，只要你增加了scoped屬性，這就在HTML5裡就是非常有效。在這個CSS裡，我從某個斷點開始用了@media查詢把作為背景的高清映像添加到<span>裡。 在下面這段代碼裡，我只添加了一個斷點，然而你當然可以按你喜歡的增加許多。

　　通過使用背景映像指示符，只有在需要的時候才會從伺服器擷取這個映像。也就是說，只有在media查詢滿足的時候才能擷取到。<img>將確保<span>有正確的高寬比，這樣<span>上的背景映像才能得到正確的現實。

　　代碼展示

　　下面是可以啟動並執行所有代碼。

　　HTML

　　首先看HTML。

123456

<span class="magik-responsive-image" id="image-01"><img src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO"><style scoped>@media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}}</style></span>

　　CSS 我們還需要對CSS最一點修改，以便在應當顯示高清映像的時候隱藏低清晰度的映像。技巧是增加backgroud-size:100%;這使得在維護高寬比不變的情況下伸展背景。

1234567891011121314151617

.magik-responsive-image {background-repeat: no-repeat;background-size: 100%;display: block;position: relative;} .magik-responsive-image img {max-width: 100%;} @media screen and (min-width: 701px) { .magik-responsive-image img{opacity: 0;}}

　　好處

• 沒有JavaScript
• 實現起來簡單
• 還可用於視頻（我將在以後的部落格文章中發表有關這方面的內容）

　　缺點

• 在案頭環境下，需要向伺服器發送兩個請求
• <style>標籤的scoped睡醒在主要的瀏覽器裡仍然沒有得到支援。正是由於這個原因，我們才需要增加一個id，不過在後端代碼中增加這通常不是問題。

　　示範

　　看看 這個展示 。

　　原文地址：pure-css-responsive-images-yes-javascript