针对高分辨率屏幕的样式优化

苹果定义高分屏（retina）已经好久了，只是最近才有越来越多的网站开始重视高分屏下的表现，QQ空间也早支持高分屏了，CSS Gaga也加入了对@2x图片的支持。嗯，迟到的文章，和大家简单的分享下。

一般来说，内容类的资源并不需要对高分屏做什么优化，需要优化的是固定的图片类资源。而且通常现在有三种做法：

1、自定义字体，将扁平化的图标做成字体，可以原生的支持高分屏，因为字体是矢量的。比如前端界用的icon-font，所以在iPhone和rMBP上看起来图标都不会模糊；缺点是有些手机端浏览器不支持，比如“用户量最大的UC浏览器”

2、矢量图片，嗯，将图标做成SVG格式，也能很完美的兼容到主流手机系统，当然Android 2.3以下版本支持很不好。

3、2倍图片，嗯，兼容性最好的方案。

使用媒体查询

这是最简单的方法：

@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {

/* style rules */

}

兼容所有浏览器的话(当然不考虑IE9以下浏览器了)，还需要加上各浏览器的前缀：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
/* Style Rules */
}

JS判断

我们可以通过window.devicePixelRatio方法来获取当前屏幕的像素比然后给body或者html标签添加差异化的class，再在样式中针对高分屏用2x的图片就好了：

var dpr = window.devicePixelRatio;

if (dpr >=1.5){

$('html').addClass("is-ratina");

}