利用media query讓背景圖適應不同解析度的裝置

標籤：

隨著上網方式的多樣化，使用者選擇上網的工具不再僅是PC，而可以是手機，或者平板電腦。隨之而來的問題是如何讓網頁適應不同解析度，這給前端工程師們帶來了新的挑戰，其中重要的一點是如何讓圖片能在不同的解析度下都能給使用者帶來良好的使用者體驗？

 

方法概述

 

CSS3中的media query屬性讓我們可以根據瀏覽器的高寬，裝置的像素比等來使用不同的CSS。當然它還一些別的用法，具體請參考這裡。

device-pixel-ratio是media query一查詢條件，用於獲得裝置的像素比。一般來說iPhone4/4s的值是2，高解析度的Andriod裝置是1.5，一般裝置是1，有了這些條件，我們就可以為不同的裝置提供不同解析度的圖片了。

事先假定讓圖片相容以上像素比，展示一張寬高為100px的圖片。首先我們需要準備三張不同解析度的圖片：當正常像素比為1時，我們載入的是正常圖片100px*100px，當像素比為1.5時，載入150px*150px的圖片，當像素比為2.0，載入200px*200px的圖片。

利用media query我們可以這樣寫：

 

 

 

大家可以用不同的解析度的裝置查看Demo：

 

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

利用media query讓背景圖適應不同解析度的裝置