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

Question

我没有太多的代码可以放进去，但是为了节省我头上的头发，我需要寻求帮助.

我使用的是retina.js，它对任何图像都不起作用。@2x图像与较小的图像位于同一个文件夹中。如果它们的大小不是两倍的话--设计师给我发了一张像素或两个像素的图像--所以我不会担心这个，因为我假设一旦加载了其他图像，这个就会在正确大小的情况下工作。

我试过速记背景:网址(foo.jpg).以及背景图像: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()混音从retina.less添加到较少的样式表中
2. 在样式表中，可以在任何地方调用.at2x()混合输入，而不是使用background-image。

#徽标{.at2x(‘/图像/my_Image.png’，200 my，100 my)；}

将汇编成：

#徽标{背景-图像:url(‘/图像/my_Image.png’)；} @media all和(-webkit-min-设备-像素比: 1.5) {#徽标{背景-图像:url(‘/图像/my_image@2x.png’)；背景大小:200 my 100 my；}}

资料来源：

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