随着上网方式的多样化，用户选择上网的工具不再仅是
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
我们可以这样写：
由于像素比的改变，背景图像的尺寸按像素比的倍数放大，所以需要缩小图片，可利用
background-size
这个属性来缩放图片。像素比为
1.5
，则
background-size
：
1/1.5
≈
66.7%
；像素比为
2
，则
background-size
：
1/2
≈
50%。
优点：
1.
使用
CSS3
的
media query
就可以做到设备像素比的判断，方法简单，成本低。
2.
图片便于修改，只需修改
css
文件。
缺点：
使用
会产生这样的问题，并不是每个设备都像
iPhone4
一样像素比是
2
。看看我们刚做的，光以上三种像素比，我们就得提供
3
张不同的图片，如果有更多种像素比呢，那可就是体力活了。


解决方法：或许我们可以创建一张更大的（
2
的
n
倍分辨率）的图片，然后按比例去缩小图片来适配不同像素比的设备。可这又意味着用户得加载更大的图片，耗费更多时间和流量。
兼容性
media query
兼容性列表：
从表中我们可以看出
media query
并不支持
IE9
以下浏览器。
考虑到多终端设备如
iPhone
，抑或是
Android
系统自带的浏览器，都是高级浏览器，对
media query
都做做到良好支持，所以我们可以把
IE
浏览器排除在外。
也可以添加添加下面的
JS
，让
IE9
之前的版本支持：
<!--[if lt IE 9]>
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
总结
设备的分辨率一直在改变，但是我们追求用户良好用户体验的理念却是一直不变的。上面的方法不一定是最好的，或许会有更多更好的来替代它。比如利用
@font-face
，
外链入图案矢量字体，或使用
svg
格式的图片等等。每个方法都有它的优缺点，只有在实践中不断的磨合，才能找到其中的平衡点。

顶一记，正在看书，学习中！

顶！希望能配上LZ自己的实例〜