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