retina.js不工作 - 不知道为什么

Question

我没有太多的代码可以放入,但寻求帮助以保存头发留在我头上...

我正在使用retina.js,它不适用于任何图像.@ 2x图像与较小图像位于同一文件夹中.一个如果它们的大小不是两倍 - 设计师发给我的是一个或两个像素的图像 - 所以我不会担心那个,因为我假设一旦其他图像被加载,这个将在大小时工作正确.

我尝试过简写背景:url(foo.jpg)....和background-image:url(foo.jpg),有和没有""中的图像.我已经辞职,以为我错过了一些愚蠢的东西,我只是没有看到它.任何帮助,将不胜感激!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>

HTML:

<ul class="grid" id="movie-grid">
<li class="movie">
  <div class="poster"></div>
  <h2 class="title"><a href="foo.html">Title</a></h2>
  <p class="desc">TV Movie</p>
</li>
</ul>

和CSS:

    .poster {
 /*background:url(../images/comingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/comingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

Answer 1

问题是您正在尝试使用retina.js来更改CSS中的图像.我相信标准的retina.js功能允许您在html代码中更改/换出图像,如下所示:

<header>
   <img src="/images/logo.png">
</header>

会变成

<header>
   <img src="/images/logo@2x.png">
</header>   

为了让retina.js替换样式表中的图像,您需要下载retina.js网站提供的LESS CSS Mixin.然后按照他们概述的步骤操作:

句法: .at2x(@path, [optional] @width: auto, [optional] @height: auto);

脚步:

1. 将.at2x()mixin 添加retina.less到LESS样式表中
2. 在样式表中,将.at2x()mixin 调用到任何地方而不是使用background-image

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

将编译为:

#logo { 
   background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

来源:

• http://imulus.github.io/retinajs/
• http://www.awwwards.com/coding-for-retina-displays-with-retinajs-tutorial.html