中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

方法概述

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

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

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

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

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

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

效果對比：

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

優(yōu)點：

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

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

缺點：

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

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

兼容性

media query兼容性列表：

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

考慮到多終端設(shè)備如iPhone，抑或是Android系統(tǒng)自帶的瀏覽器，都是高級瀏覽器，對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è)備的分辨率一直在改變，但是我們追求用戶良好用戶體驗的理念卻是一直不變的。上面的方法不一定是最好的，或許會有更多更好的來替代它。比如利用@font-face，外鏈入圖案矢量字體，或使用svg格式的圖片等等。每個方法都有它的優(yōu)缺點，只有在實踐中不斷的磨合，才能找到其中的平衡點。

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