image-set實現Retina屏幕下圖片顯示詳細介紹
2024-07-11 08:49:09
供稿：網友
在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。
上面就是有關于“image-set”的簡單介紹。
為什么要使用image-set而不使用Media Queries?
如果你有閱讀有關于Retina的文章，你就會知道，在Retina屏幕下實現圖像顯示的方法有很多種，比如說“img”標簽方法、javascript和方法，還有“Media Queries”方法，特別是“Media Queries”方法（如果你不清楚這些方法，可以點擊 這和這）。既然有這么多種方法要以實現Retina屏幕下的圖像顯示，那么為什么還要使用“image-set”方法。這個問題問得非常的好。Jason Grigsby 在“Safari 6 and Chrome 21 add image-set to support retina images ”中把為什么要使用“image-set”而不使用CSS3的“Media Queries”實現Retina屏幕下圖像方法做了兩點描述。
不像Media Queries，image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。在未來，我希望有人在使用Retina設備瀏覽網頁，但網速慢時，告訴設備采用低分辨率的圖像。甚至會更好，他能根據網速智能的選擇需要的圖像。
使用“Media Queries”的問題是，在高分辨率顯示器下他沒有選擇的權利。也就是說，瀏覽器分辨率等于1或2或者其他的時候，瀏覽器必須加載指定的圖像。
image-set的好處是，在支持image-set的瀏覽器會在高分辨下匹配需要的圖像，而沒有其他額外的功能。但我相信，為瀏覽器提供不同的圖像選擇，這瀏覽器在不同的分辨下選擇正確的圖像。
image-set能讓各種不同分辨下的圖像都顯示在CSS中的同一個地方。而使用media queries顯示不同圖像時，你可能會隔開很多行代碼，難于尋找到對應的圖像。
image-set真的好強大，很可惜的是，他僅支持background-image屬性，而不能使用在“<img>”標簽中。
前面也說過了，目前image-set只能使用webkit瀏覽器的私有屬性“-webkit”在“Safari6”和“Chrome21”下運行。現在在IOS 6得到 支持。不過很遺憾的是，目前別的瀏覽器還是不支持image-set,現在他僅是CSS4的一個草案，希望將來能寫到標準中，造福于苦逼的前端人員。
image-set雖然目前是一個全新的屬性，沒有幾個瀏覽器支持，但這是一種新技術，我們需要用起來，只有用的人多了，將來才有機會寫入標準的規(guī)范中，正所謂“世上本無路，走的人多了，路就出來了”。但話說回來，這種技術用來解決Retina屏幕下的圖像顯示，是一種絕佳的方法，如果你開會的項目中有汲及到Retina設備的，不仿大膽的使用起image-set，就像qq.com這大佬一樣。
東一榔頭西一棒的說完了image-set，如果你不知道他是怎么一回事，其實不要緊，你只要先知道這樣使用能幫你解決問題就OK，因為有太多的為什么我們無能力現在解決，但隨著時間的累積，我們終有一天能搞明白他的原理。最后希望這篇文章能幫到大家，如果你有更好的方法，記得與我們一起分享。
