使用css和@media测试视网膜图像

Question

我想知道如何在常规浏览器上测试一些视网膜图像css？我也试过我以前的代码而不是下面的代码,并想知道它是否有效？

很难判断正确的图像是否正在加载,因为这是相同的图像质量更好.

//retina stuff
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #home {
          background: url('bg-home-x2.png') no-repeat;
}

.shelf {
    background: url('shelf-x2.png') no-repeat top center;
    height: 111px;
    padding-bottom: 0px;
}

#pantry {
    background: url('bg-pantry-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
}

#list {
    background: url('bg-cart-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
    margin-top: -6px;
}
}

Answer 1

你实际上可以使用Firefox:

1. 转到"about:config"
2. 找到"layout.css.devPixelsPerPx
3. 将其更改为您想要的比例(1为正常,2为视网膜等)

刷新您的页面 - 繁荣,您的媒体查询现已开始!为了网络开发真棒而向Firefox致敬!

这是在Windows 7上使用Firefox 21.0完成的.