隨著上網(wǎng)方式的多樣化，用戶(hù)選擇上網(wǎng)的工具不再僅是PC，而可以是手機(jī)，或者平板電腦。隨之而來(lái)的問(wèn)題是如何讓網(wǎng)頁(yè)適應(yīng)不同分辨率，這給前端工程師們帶來(lái)了新的挑戰(zhàn)，其中重要的一點(diǎn)是如何讓圖片能在不同的分辨率下都能給用戶(hù)帶來(lái)良好的用戶(hù)體驗(yàn)？

方法概述

CSS3中的media query屬性讓我們可以根據(jù)瀏覽器的高寬，設(shè)備的像素比等來(lái)使用不同的CSS。當(dāng)然它還一些別的用法，具體請(qǐng)參考這里。

device-pixel-ratio是media query一查詢(xún)條件，用于獲得設(shè)備的像素比。一般來(lái)說(shuō)iPhone4/4s的值是2，高分辨率的Andriod設(shè)備是1.5，一般設(shè)備是1，有了這些條件，我們就可以為不同的設(shè)備提供不同分辨率的圖片了。

事先假定讓圖片兼容以上像素比，展示一張寬高為100px的圖片。首先我們需要準(zhǔn)備三張不同分辨率的圖片：當(dāng)正常像素比為1時(shí)，我們載入的是正常圖片100px*100px，當(dāng)像素比為1.5時(shí)，載入150px*150px的圖片，當(dāng)像素比為2.0，載入200px*200px的圖片。

利用media query我們可以這樣寫(xiě)：

大家可以用不同的分辨率的設(shè)備查看Demo：

http://tgideas.qq.com/demo/media_query/demo_01.htm

效果對(duì)比：

由于像素比的改變，背景圖像的尺寸按像素比的倍數(shù)放大，所以需要縮小圖片，可利用background-size這個(gè)屬性來(lái)縮放圖片。像素比為1.5，則background-size：1/1.5≈66.7%；像素比為2，則background-size：1/2≈50%。

優(yōu)點(diǎn)：

1.使用CSS3的media query就可以做到設(shè)備像素比的判斷，方法簡(jiǎn)單，成本低。

2.圖片便于修改，只需修改css文件。

缺點(diǎn)：

使用會(huì)產(chǎn)生這樣的問(wèn)題，并不是每個(gè)設(shè)備都像iPhone4一樣像素比是2?？纯次覀儎傋龅模庖陨先N像素比，我們就得提供3張不同的圖片，如果有更多種像素比呢，那可就是體力活了。

解決方法：或許我們可以創(chuàng)建一張更大的（2的n倍分辨率）的圖片，然后按比例去縮小圖片來(lái)適配不同像素比的設(shè)備?？蛇@又意味著用戶(hù)得加載更大的圖片，耗費(fèi)更多時(shí)間和流量。

兼容性

media query兼容性列表：

從表中我們可以看出media query并不支持IE9以下瀏覽器。

考慮到多終端設(shè)備如iPhone，抑或是Android系統(tǒng)自帶的瀏覽器，都是高級(jí)瀏覽器，對(duì)media query都做做到良好支持，所以我們可以把IE瀏覽器排除在外。

也可以添加添加下面的JS，讓IE9之前的版本支持：

<!–[if lt IE 9]>

<scriptsrc=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>

<![endif]–>

總結(jié)

設(shè)備的分辨率一直在改變，但是我們追求用戶(hù)良好用戶(hù)體驗(yàn)的理念卻是一直不變的。上面的方法不一定是最好的，或許會(huì)有更多更好的來(lái)替代它。比如利用@font-face，外鏈入圖案矢量字體，或使用svg格式的圖片等等。每個(gè)方法都有它的優(yōu)缺點(diǎn)，只有在實(shí)踐中不斷的磨合，才能找到其中的平衡點(diǎn)。

來(lái)源：http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201208/77774.shtml